paulohybex-nexus-tcms-ui-spec-workflow.prompt.json json {
"prompt": "# Phase {N} — UI Design Contract\n\n> Visual and interaction contract for frontend phases. Verified against impeccable standards.\n\n---\n\n## Design System\n\n| Property | Value |\n|----------|-------|\n| Component library | {library or \"none\"} |\n| Icon library | {library} |\n| Font | {font} |\n| CSS approach | {tailwind / css modules / styled-components / etc.} |\n\n---\n\n## Spacing Scale\n\nDeclared values (must be multiples of 4):\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| xs | 4px | Icon gaps, inline padding |\n| sm | 8px | Compact element spacing |\n| md | 16px | Default element spacing |\n| lg | 24px | Section padding |\n| xl | 32px | Layout gaps |\n| 2xl | 48px | Major section breaks |\n| 3xl | 64px | Page-level spacing |\n\nExceptions: {list any, or \"none\"}\n\n---\n\n## Typography\n\n| Role | Size | Weight | Line Height |\n|------|------|--------|-------------|\n| Body | {px} | {weight} | {ratio} |\n| Label | {px} | {weight} | {ratio} |\n| Heading | {px} | {weight} | {ratio} |\n| Display | {px} | {weight} | {ratio} |\n\n---\n\n## Color\n\n| Role | Value | Usage |\n|------|-------|-------|\n| Primary | {hex} | Buttons, links, active states |\n| Secondary | {hex} | Supporting actions |\n| Neutral | {hex} | Text, borders, backgrounds |\n| Success | {hex} | Confirmations, positive states |\n| Warning | {hex} | Cautions, pending states |\n| Error | {hex} | Errors, destructive actions |\n\n---\n\n## Key Components\n\n| Component | Spec |\n|-----------|------|\n| {component} | {key constraints: size, padding, border-radius, shadow} |\n\n---\n\n## Interaction Patterns\n\n| Pattern | Behavior |\n|---------|----------|\n| Loading | {skeleton / spinner / progressive} |\n| Empty state | {illustration + CTA / minimal text / guided action} |\n| Error state | {inline / toast / modal / redirect} |\n| Transitions | {duration, easing, what animates} |\n\n---\n\n## Responsive Breakpoints\n\n| Breakpoint | Width | Layout Changes |\n|------------|-------|----------------|\n| Mobile | < 640px | {description} |\n| Tablet | 640-1024px | {description} |\n| Desktop | > 1024px | {description} |\n\n---\n\n## Impeccable Checklist\n\n- [ ] No overused fonts (Inter, Roboto, Arial)\n- [ ] No AI palette (cyan-on-dark, purple-to-blue gradients)\n- [ ] No pure black (#000) or pure white (#fff) — tinted neutrals\n- [ ] No nested cards inside cards\n- [ ] No large rounded icons above every heading\n- [ ] At least one intentional, memorable design decision\n- [ ] Typography has clear visual hierarchy with modular scale\n- [ ] Spacing creates rhythm through variation, not uniformity\n\n**If someone saw this interface and immediately thought AI made it — that is the problem.**",
"variables": [],
"notes": "Declared values (must be multiples of 4):",
"metadata": {
"source": {
"provider": "github-windsurf-workflows",
"repository": "https://github.com/PauloHYBEX/Nexus-TCMS",
"path": ".windsurf/workflows/templates/ui-spec.md",
"ref": "af66d4e66d7443d045e74bafc302cd998ceb5b99",
"url": "https://github.com/PauloHYBEX/Nexus-TCMS/blob/af66d4e66d7443d045e74bafc302cd998ceb5b99/.windsurf/workflows/templates/ui-spec.md",
"key": "PauloHYBEX/Nexus-TCMS/.windsurf/workflows/templates/ui-spec.md"
}
}
}
