design-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

仔细规划并严格按照以下视频开始设计： <video>$ARGUMENTS</video>

Required Skills (Priority Order)

必备技能（优先级排序）

ui-ux-pro-max
- Design intelligence database (ALWAYS ACTIVATE FIRST)
frontend-design
- Video 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 video: be specific about describing every element, every interaction, every animation, every transition, every color, every font, every border, every spacing, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
- IMPORTANT: Try to predict the font name (Google Fonts) and font size in the given video, 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 video:
- 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
```
文档。