Design to Code Implementation

高级development最低上下文：32K

Converts a design specification or screenshot into accessible, responsive production UI while preserving component boundaries, design tokens, semantic structure, and states.

frontenddesign-to-codeuiaccessibility

使用场景

  • Screenshot implementation
  • Design handoff
  • Responsive component development

示例提示词

Implement this design as an accessible responsive component. Reuse existing tokens and components, include loading and empty states, and explain the component API.

推荐模型

claude-opus-4-6gpt-5gemini-2-5-pro

兼容工具

claude-codecursorgithub-copilotkiroany

模态

输入: image, text, code
→
输出: text, code

相关 Skills

frontend-designreact-component-generator

作者

OpenModels Community

@openmodelsrun