メニュー
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing designs, 切图, 设计稿转代码, or converting mockups to frontend code.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/whyzsm/tiny-agents --skill design-to-codeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Single-Agent T-MAX Java backend architecture and engineering rule package. Use when Codex must design, implement, review, or diagnose T-MAX backend services involving Java 8, Spring Boot, Kylin, MyBatis XML, TiDB/MySQL, Apollo/Nacos, Feign, AnePageHelper, ResponseResult/DataGridResult, UEP export, Redis, RabbitMQ, or Maven multi-module repositories. Routes one Agent through repository intake, architecture decisions, API/data contracts, implementation diagnosis, quality/security review, and bounded evidence loops while keeping builds, tests, live calls, commits, and pushes as separate authority boundaries.
Create polished consulting-style single-file HTML research reports from messy business notes, screenshots, metrics, and iterative user feedback. Use this skill whenever the user asks for a 咨询风/艾瑞咨询风/研究报告/汇报报告/HTML报告, wants business or AI landing-practice material turned into a management-facing report, asks to add charts/diagrams, or asks to update report metrics and keep the whole HTML report consistent.
Audit HarmonyOS applications for AppGallery/AGC release readiness, including Huawei UX/HMI controls, system-feature integrations, and performance gates for multi-input interaction, latency, frame rate, content display, memory, and CPU. Use when users ask for 鸿蒙上架自检、应用市场审核、AGC发布前检查、控件/系统特性/人机交互/签名/隐私/权限/截图/性能核对或 release 包门禁, especially for Stage-model projects with module.json5, build-profile.json5, hvigorw, and local-first data constraints.
| name | design-to-code |
| description | Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing designs, 切图, 设计稿转代码, or converting mockups to frontend code. |
将设计稿（Figma/Sketch/图片）高保真还原为前端代码，保证布局、间距、字体、颜色与交互一致。
| 用户给的 | 第一步 |
|---|---|
| Figma 链接 | 问：有没有 Figma 访问权限？如果没有，让用户截图或导出标注 |
| 设计图截图 | 直接分析，提取尺寸/颜色/字体/间距，列出关键标注 |
| 只有描述，没有设计图 | 问：「有没有设计稿？如果没有，我可以按常见 UI 规范实现，但可能和你预期有出入」 |
| 有设计图 + 现有代码 | 先读现有代码，了解技术栈和已有组件，再还原设计 |
读设计图时，按这个顺序提取（不要跳过）：
布局结构
间距与尺寸（精确到 px）
字体
颜色
交互状态（设计稿里有没有标注）
按这个顺序写代码，不要一上来就写细节：
设计稿里的颜色/字号在项目 token 里没有
→ 先问用户：「这个颜色 #3B82F6 是不是对应 blue-500？」不要直接写魔法值
→ 如果确认没有对应 token，用 CSS 变量命名（--color-brand-primary），便于后续统一
设计稿标注不清晰，看不出具体数值 → 说明哪里看不清，给出合理推测值，让用户确认：「这里间距看起来是 16px，对吗？」
设计稿有动效但没有说明 → 不要自己发明动效，问用户：「这里有过渡动画吗？如果有，持续时间和缓动函数是什么？」
实现后和设计稿有出入 → 主动说明差异和原因，不要假装没有：「这里字体用了系统字体代替，因为项目没有引入 Inter」
<button>，链接用 <a>，不用 <div> 代替）alt 属性| 设计稿 | 实现方式 |
|---|---|
| 8px 栅格 | 间距用 8 的倍数（8/16/24/32） |
| 字体层级 | 对应 heading/body/caption 等语义类或 design token |
| 模糊/毛玻璃 | backdrop-filter + 半透明背景 |
| 多行截断 | line-clamp 或 -webkit-line-clamp |
| 安全区域 | padding 配合 env(safe-area-inset-*) |