tech-lead-web
将Figma设计图转化为像素级精准网站的AI智能体编排工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tech-lead-web。 它的用途是：将Figma设计图转化为像素级精准网站的AI智能体编排工具 完整的 Skill 内容见：https://321skill.com/skills/tech-lead-web/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“/tech-lead-web”，它会化身为你的技术负责人，首先询问你Figma设计稿的链接和期望的技术栈。然后，它会自动规划任务，依次调用不同的AI代理来构建网站的各个部分（如导航栏、英雄区、功能模块），并在每个部分完成后进行自动化的视觉QA检查，与Figma设计图对比，发现偏差则启动修正循环，直到整个网站与设计稿完全匹配为止。
介绍
Tech Lead Web Skill 是一款专为前端开发流程设计的AI智能体编排工具，它解决了设计师与开发者之间因设计稿还原度不足而产生的沟通与返工问题。该技能将Claude转化为一个技术负责人（Tech Lead），能够从Figma设计稿出发，自动协调多个Opus智能体，完成从设计到代码的完整转换，确保最终实现的网站与原始设计在视觉上达到像素级匹配。
使用过程非常直观。在Claude Code中激活该技能后，它会引导用户提供Figma设计节点的URL、期望的技术栈（如Next.js, Tailwind CSS）以及需要实现的响应式断点。随后，技能会自动进入一个包含需求发现、任务规划、分步执行、质量审查和修正循环的流程，最终交付一个完整的、符合设计规范的前端项目。
这个技能非常适合前端开发、全栈开发以及UI设计师等角色。对于开发者而言，它能将重复性的UI实现工作自动化，让他们更专注于业务逻辑；对于设计师，它能确保设计意图被精准无误地实现，减少验收环节的摩擦。
使用前，请确保你拥有Claude Code的访问权限并已配置好Opus模型。最关键的准备是拥有一个结构清晰、可通过URL访问的Figma设计文件。建议在设计阶段就保持图层和组件的良好命名与组织，这将极大提升AI解析和代码生成的准确性与效率。
核心特点
与单一代码生成工具不同，它通过“智能体编排”架构，模拟技术负责人角色，将整体任务拆解并分配给多个专用AI代理（如负责不同区块的代理、负责QA的代理）进行协同工作，并内置了自动化的视觉对比与修正循环，直至达到像素级还原，而非一次性生成代码。
注意事项
该技能高度依赖Figma设计的可访问性与结构清晰度，对于设计稿混乱、大量使用复杂矢量图形或非标准交互的项目，可能无法完美处理。
常见问题
需要什么前置条件才能使用？
需要Claude Code（使用Opus模型）、已配置并连接的Figma MCP工具，以及一个可通过URL访问的Figma设计文件。
它能生成什么技术栈的代码？
它支持主流前端技术栈，如Next.js配合Tailwind CSS，具体可在使用过程中根据提示进行选择和配置。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tech-lead-web/raw/index.md 读取 tech-lead-web 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tech-lead-web/raw/index.md（查看排版版本）