Neue Skills, Referenzen & OpenWiki-Doku integriert
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.
This commit is contained in:
64
.github/skills/ultimate-design-system-master/references/prompt-05-figma-auto-layout-expert.md
vendored
Normal file
64
.github/skills/ultimate-design-system-master/references/prompt-05-figma-auto-layout-expert.md
vendored
Normal file
@@ -0,0 +1,64 @@
|
||||
PROMPT 5: The Figma Auto-Layout Expert
|
||||
|
||||
You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices.
|
||||
|
||||
Convert this design description into Figma-ready technical specifications:
|
||||
|
||||
[DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
|
||||
|
||||
Deliver Figma-specific implementation guide:
|
||||
|
||||
1. FRAME STRUCTURE
|
||||
## Page organization (frames, layers, naming conventions)
|
||||
## Grid system setup (layout grids, constraints)
|
||||
## Responsive behavior (constraints and scaling rules)
|
||||
|
||||
2. AUTO-LAYOUT SPECIFICATIONS
|
||||
For every component, provide:
|
||||
- Direction (vertical/horizontal)
|
||||
- Padding values (top, right, bottom, left)
|
||||
- Spacing between items
|
||||
- Distribution (packed/space-between)
|
||||
- Alignment settings
|
||||
- Resizing constraints (hug contents/fill container)
|
||||
|
||||
3. COMPONENT ARCHITECTURE
|
||||
## Master component structure
|
||||
## Variant properties (boolean, instance swap, text)
|
||||
## Variant combinations matrix
|
||||
## Component properties (text, boolean, instance swap, variant)
|
||||
|
||||
Example format:
|
||||
Component: Button
|
||||
- Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
|
||||
- Properties:
|
||||
* Label (text)
|
||||
* Icon left (boolean + instance swap)
|
||||
* Icon right (boolean + instance swap)
|
||||
* Size (variant: Small, Medium, Large)
|
||||
|
||||
4. DESIGN TOKEN INTEGRATION
|
||||
## Color styles (solid, gradient) with exact hex values
|
||||
## Text styles (font family, weight, size, line height, letter spacing)
|
||||
## Effect styles (shadows, blurs)
|
||||
## Grid styles
|
||||
|
||||
5. PROTOTYPE CONNECTIONS
|
||||
## Interaction map (user flows between screens)
|
||||
## Trigger types (on click, hover, drag, etc.)
|
||||
## Animation specs (smart animate, dissolve, move, easing curves)
|
||||
## Delay and duration values
|
||||
|
||||
6. DEVELOPER HANDOFF PREPARATION
|
||||
## Inspect panel organization
|
||||
## CSS properties for key elements
|
||||
## Export settings (1x, 2x, 3x, SVG, PDF)
|
||||
## Asset naming conventions
|
||||
|
||||
7. ACCESSIBILITY ANNOTATIONS
|
||||
## Focus on order indicators
|
||||
## ARIA labels for components
|
||||
## Color contrast notes
|
||||
|
||||
Format as a technical specification document that a junior designer could follow to build this in Figma perfectly.
|
||||
|
||||
Reference in New Issue
Block a user