01046b01e4
Umfangreiche Erweiterung der Skill-Bibliothek: Neue Skills für Humanisierung (Englisch/PT-BR), Design-Validierung, AI-SEO und Coolify-Deployment inkl. Regelwerke, Presets, Pattern-Referenzen, Testfälle und Automatisierungsskripte. Zusätzliche Skills für Revenue-Centric Design, Pier Cloud, OKF, Lebenslauf- und LinkedIn-Optimierung sowie zahlreiche Referenzdateien, Checklisten und YAML/JSON/Markdown-Templates. Einführung einer vollständigen OpenWiki-Dokumentation mit Architektur-, Domain- und Workflow-Beschreibungen, zentralem Index und automatisierten Updates. Modularer Aufbau, restriktive Lizenzen und umfassende Qualitäts- und Evaluationsmechanismen für alle neuen Inhalte.
66 lines
1.9 KiB
Markdown
66 lines
1.9 KiB
Markdown
PROMPT 9: The Design-to-Code Translator
|
|
|
|
You are a Design Engineer at Vercel, bridging design and development.
|
|
|
|
Convert this design into production-ready frontend code:
|
|
|
|
[DESIGN DESCRIPTION, WIREFRAME, OR COMPONENT SPECS]
|
|
|
|
Tech stack: [REACT/VUE/SV ELTE/NEXT.JS/TAILWIND/ETC.]
|
|
|
|
Deliverables:
|
|
|
|
1. COMPONENT ARCHITECTURE
|
|
## Component hierarchy tree
|
|
## Props interface definition (TypeScript)
|
|
## State management strategy
|
|
## Data flow diagram
|
|
|
|
2. PRODUCTION CODE
|
|
## Complete, copy-paste ready component code
|
|
## Responsive implementation (mobile-first)
|
|
## Accessibility attributes (ARIA labels, roles, states)
|
|
## Error boundaries and loading states
|
|
## Animation/transition implementation
|
|
|
|
3. STYLING SPECIFICATIONS
|
|
## CSS/Tailwind classes with design token mapping
|
|
## CSS variables for theming
|
|
## Dark mode implementation
|
|
## Responsive breakpoints
|
|
## Hover/focus/active states
|
|
|
|
4. DESIGN TOKEN INTEGRATION
|
|
## Color tokens mapped to CSS variables
|
|
## Typography tokens (font sizes, weights, line heights)
|
|
## Spacing tokens (padding, margin, gap)
|
|
## Shadow/elevation tokens
|
|
## Border radius tokens
|
|
|
|
5. ASSET OPTIMIZATION
|
|
## Image component with lazy loading
|
|
## SVG optimization strategy
|
|
## Icon system (SVG sprite or icon library)
|
|
## Font loading strategy
|
|
|
|
6. PERFORMANCE CONSIDERATIONS
|
|
## Code splitting recommendations
|
|
## Bundle size optimization
|
|
## Rendering optimization (React.memo, useMemo, etc.)
|
|
## Image optimization (next/image or equivalent)
|
|
|
|
7. TESTING STRATEGY
|
|
## Unit test cases (React Testing Library)
|
|
## Visual regression test scenarios
|
|
## Accessibility tests (axe-core)
|
|
## Responsive test cases
|
|
|
|
8. DOCUMENTATION
|
|
## JSDoc comments for all props
|
|
## Usage examples (3 variations)
|
|
## Do's and don'ts
|
|
## Changelog template
|
|
|
|
Include "Designer's Intent" comments explaining why certain code decisions preserve the design vision.
|
|
|