design-to-production
Преобразование HTML-прототипов в готовые React-компоненты
Ручное преобразование дизайн-прототипов в React-компоненты отнимает много времени и чревато ошибками. Этот навык автоматизирует весь процесс от анализа HTML через создание структуры компонента до проверки качества, сокращая время реализации на 70% и обеспечивая соблюдение единых стандартов кода.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "design-to-production". Convert .superdesign/design_iterations/glassmorphism-card.html to a React component
Erwartetes Ergebnis:
- ✓ Analyzed HTML structure: 3 buttons, 2 inputs, flex layout
- ✓ Mapped to shadcn/ui: Card, Button, Input, Badge
- ✓ Scaffolded: modules/practice/components/GlassmorphismCard.tsx
- ✓ Ready for implementation: 5 TODO items added
- Run validation: ./.claude/skills/design-to-production/scripts/validate.sh modules/practice/components/GlassmorphismCard.tsx
Verwendung von "design-to-production". Analyze .superdesign/design_iterations/login-form.html
Erwartetes Ergebnis:
- ✓ Component: LoginForm
- ✓ Glassmorphism classes: glass-card, btn-glass, neon-glow-purple
- ✓ Layout pattern: vertical-stack
- ✓ Suggested template: interactive-card (4 buttons detected)
- ✓ Next: Scaffold with --name LoginForm --module profile --template interactive-card
Sicherheitsaudit
SicherAll 606 static findings are false positives. The analyzer misidentified markdown documentation syntax (headings, code examples) and legitimate build script patterns as security issues. The actual shell scripts are safe build tools that validate inputs and operate on controlled paths.
Risikofaktoren
⚡ Enthält Skripte (3)
Qualitätsbewertung
Was du bauen kannst
Быстрая реализация компонентов
Преобразование итераций HTML-дизайна в готовые React-компоненты менее чем за час вместо полдня
Обеспечение единства дизайна
Автоматическое соблюдение всеми реализованными компонентами паттернов glassmorphism и соглашений shadcn/ui
Автоматизация процесса передачи
Оптимизация процесса передачи от дизайнера к разработчику путем автоматизации преобразования HTML в React
Probiere diese Prompts
Convert the HTML prototype at .superdesign/design_iterations/button-component.html to a React component
Analyze .superdesign/design_iterations/glassmorphism-card.html and scaffold a complete interactive-card component with proper glassmorphism classes
Implement the hints panel from our design iteration, scaffold the component, then validate it meets all quality standards
Process all HTML files in .superdesign/design_iterations/ and scaffold React components for each one, then run validation on all generated components
Bewährte Verfahren
- Храните HTML-прототипы в .superdesign/design_iterations/ для единообразной структуры проекта
- Запускайте проверку сразу после реализации логики компонента для раннего выявления проблем
- Используйте этап интерактивного сопоставления для проверки и переопределения предложенных сопоставлений компонентов shadcn
Vermeiden
- Пропуск проверок валидации - они выявляют типичные проблемы до code review
- Изменение структуры созданного компонента без обновления соответствующих правил валидации
- Использование пользовательских glassmorphism-классов, не определенных в styles/glassmorphism.css
Häufig gestellte Fragen
Какие форматы HTML-файлов поддерживаются?
Могу ли я настроить шаблоны компонентов?
Какие стандарты качества применяются?
Работает ли это с другими UI-библиотеками?
Где сохраняются сгенерированные компоненты?
Могу ли я преобразовать несколько компонентов одновременно?
Entwicklerdetails
Dateistruktur