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.
1.9 KiB
1.9 KiB
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:
-
COMPONENT ARCHITECTURE
Component hierarchy tree
Props interface definition (TypeScript)
State management strategy
Data flow diagram
-
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
-
STYLING SPECIFICATIONS
CSS/Tailwind classes with design token mapping
CSS variables for theming
Dark mode implementation
Responsive breakpoints
Hover/focus/active states
-
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
-
ASSET OPTIMIZATION
Image component with lazy loading
SVG optimization strategy
Icon system (SVG sprite or icon library)
Font loading strategy
-
PERFORMANCE CONSIDERATIONS
Code splitting recommendations
Bundle size optimization
Rendering optimization (React.memo, useMemo, etc.)
Image optimization (next/image or equivalent)
-
TESTING STRATEGY
Unit test cases (React Testing Library)
Visual regression test scenarios
Accessibility tests (axe-core)
Responsive test cases
-
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.