工具是手艺的延伸。尧图整理 Figma、Sketch、Photoshop、Adobe XD、Webflow、VS Code、GitHub 七款常用工具的实战经验，每个工具只讲最常用的 20% 功能，解决 80% 的日常需求。
覆盖视觉设计、原型交互、切图输出、代码编辑、版本协作、可视化建站全流程，按需取用。
网页设计不是单一工具能完成的事。视觉、原型、代码三块工具各有分工，理解它们的边界，才能搭出顺手的协作流。
设计侧 · 视觉与原型
DESIGN SIDE
设计侧工具负责把需求与想法转成可被评审的画面与原型。Figma 适合多人实时协作，Sketch 在 Mac 上手感轻盈，Photoshop 处理位图与切图无可替代，Adobe XD 则在原型交互上响应迅速。
开发侧 · 代码与部署
DEV SIDE
开发侧工具承接设计稿，把它写成可被浏览器解析的 HTML、CSS、JavaScript，并通过版本控制与部署上线。VS Code 是当前前端绝对主力，GitHub 负责版本与协作，Webflow 则让不会写代码的人也能直接产出可托管站点。
工具再多，工作流乱了也会拖慢产出。下面四条是尧图在多个项目里反复验证过的协作底线。
每个产物只有一个权威来源：设计稿在 Figma，代码在 GitHub，避免多份本地文件互相覆盖。
无论设计还是代码，都先建组件再拼页面。组件改一处，全站同步更新，减少重复劳动。
设计稿按版本命名，代码按功能小步提交。出问题能快速回滚，而不是重做一整天的工作量。
设计交付前用 Dev Mode 或标注插件输出尺寸、色值、间距，开发按标注实现，减少来回返工。
