design-screenshot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Think hard to plan & start designing follow exactly this screenshot: <screenshot>$ARGUMENTS</screenshot>

仔细规划并严格按照此截图开始设计： <screenshot>$ARGUMENTS</screenshot>

Required Skills (Priority Order)

必备技能（优先级排序）

ui-ux-pro-max
- Design intelligence database (ALWAYS ACTIVATE FIRST)
frontend-design
- Screenshot analysis and replication

Ensure token efficiency while maintaining high quality.

ui-ux-pro-max
- 设计智能数据库（务必优先激活）
frontend-design
- 截图分析与还原

在保证高质量的同时，确保Token使用效率。

Workflow:

工作流程：

Use
```
ai-multimodal
```
skills to describe super details of the screenshot (design style, trends, fonts, colors, border, spacing, elements' positions, size, shape, texture, material, light, shadow, reflection, refraction, blur, glow, image, background transparency, transition, etc.)
- IMPORTANT: Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
Use
```
ui-ux-designer
```
subagent to create a design plan following the progressive disclosure structure so the final result matches the screenshot:
- Create a directory using naming pattern from
```
## Naming
```
  section.
- Save the overview access point at
```
plan.md
```
  , keep it generic, under 80 lines, and list each phase with status/progress and links.
- For each phase, add
```
phase-XX-phase-name.md
```
  files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
- Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
Then implement the plan step by step.
If user doesn't specify, create the design in pure HTML/CSS/JS.
Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
If user approves the changes, update the
```
./docs/design-guidelines.md
```
docs if needed.

使用
```
ai-multimodal
```
技能详细描述截图的所有细节（设计风格、趋势、字体、颜色、边框、间距、元素位置、尺寸、形状、纹理、材质、光影、阴影、反射、折射、模糊、发光、图像、背景透明度、过渡效果等）
- 重要提示： 尝试预测截图中使用的字体名称（Google Fonts）和字号，不要只使用Inter或Poppins。
使用
```
ui-ux-designer
```
子Agent创建遵循渐进式披露结构的设计方案，确保最终结果与截图匹配：
- 按照
```
## 命名
```
  部分的命名规则创建目录。
- 将概览入口保存至
```
plan.md
```
  ，内容保持通用，不超过80行，并列出每个阶段的状态/进度及链接。
- 为每个阶段创建
```
phase-XX-phase-name.md
```
  文件，包含以下章节（上下文链接、带日期/优先级/状态的概览、关键洞察、需求、架构、相关代码文件、实施步骤、待办事项列表、成功标准、风险评估、安全考量、下一步计划）。
- 所有研究类Markdown报告需简洁（≤150行），同时覆盖所有要求的主题并包含引用。
然后逐步实施该方案。
如果用户未指定，使用纯HTML/CSS/JS创建设计。
向用户反馈变更摘要，简要解释所有内容，并请用户审核变更并批准。
如果用户批准变更，必要时更新
```
./docs/design-guidelines.md
```
文档。

IMPORTANT Task Planning Notes

重要任务规划说明

Always plan and break many small todo tasks
Always add a final review todo task to review the works done at the end to find any fix or enhancement needed

始终将任务规划并拆分为多个小型待办事项
始终添加最终审核待办任务，在最后检查已完成的工作，寻找需要修复或优化的地方

Important Notes:

重要注意事项：

ALWAYS REMEMBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.
Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill for image generation. Use them to create the design with real assets.
Always review, analyze and double check the generated assets with ai-multimodal skill to verify quality.
Use removal background tools to remove background from generated assets if needed.
Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
Maintain and update
```
./docs/design-guidelines.md
```
docs if needed.

务必牢记，你拥有顶尖UI/UX设计师的技能，曾在Dribbble、Behance、Awwwards、Mobbin、TheFWA等平台斩获众多奖项。
记住你可以借助
```
ai-multimodal
```
技能生成图片、视频、编辑图片等，用它来创建带有真实资源的设计。
始终使用
```
ai-multimodal
```
技能审核、分析并双重检查生成的资源，以验证质量。
必要时使用背景移除工具去除生成资源的背景。
创建叙事性设计、沉浸式3D体验、微交互和交互式界面。
必要时维护并更新
```
./docs/design-guidelines.md
```
文档。