antigravity-ipa-workflow/skills/ipa-design/SKILL.md at main

Files

nvtien c5d9aab580 Initial commit: antigravity-ipa-workflow

2026-02-16 13:58:02 +09:00

3.6 KiB

Raw Permalink Blame History

name: ipa-design description: Generate production-ready HTML/CSS/JS prototypes from UI_SPEC.md. Use when you need visual mockups for all screens defined in the UI spec, want to validate UI before proceeding to detail design, or need HTML prototypes for design analysis. Trigger phrases: "generate prototypes", "create html mockups", "generate ui prototypes from spec".

Do NOT generate UI mockups until SRD.md exists in ./docs/. Run ipa-spec first.

Overview

Generate production-ready HTML/CSS/JS prototypes from docs/UI_SPEC.md. This skill implements the spec exactly — no creative design decisions.

When to Use

UI_SPEC.md exists and is complete
Visual prototypes are needed for user testing or development reference
Completing Stage 2 (design) of the IPA pipeline

Don't Use When

UI_SPEC.md does not exist (run ipa-spec first)
You want to make design decisions — this skill only implements what the spec defines
Rapid text-only documentation is sufficient

Mandatory Rules (NON-NEGOTIABLE)

Read docs/UI_SPEC.md COMPLETELY before generating any screen
Screen content MUST match UI_SPEC exactly — no improvisation
If spec says "API Keys" → output "API Keys", not "Integrations"
No creative additions beyond what spec defines
If spec is unclear → output placeholder with

Workflow

1. Read docs/UI_SPEC.md completely
   ├── Count total screens
   ├── Note each screen's purpose
   └── Extract Design System tokens

2. For EACH screen in UI_SPEC:
   ├── Read screen spec section
   ├── Generate HTML matching spec exactly
   ├── Apply CJX stage from spec
   └── Use layout classes from references

3. Generate shared files:
   ├── styles.css (design tokens from UI_SPEC)
   ├── components.css
   ├── interactions.js (CJX animations)
   └── README.md (FR mapping)

4. Validate:
   ├── Count screens matches UI_SPEC
   ├── Each screen content matches spec
   └── All layout classes correct

Output Structure

prototypes/
├── README.md              # Index + FR mapping
├── styles.css             # Design tokens from UI_SPEC
├── components.css         # Reusable components
├── interactions.js        # CJX animations
├── s01-{screen}.html
├── s02-{screen}.html
└── ...

Screen File Template

<!--
  Screen: S-XX {Name from UI_SPEC}
  CJX Stage: {from UI_SPEC}
  FR Mapping: FR-XX
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>{Screen Name}</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="components.css">
</head>
<body class="cjx-{stage}">
  <div class="app-layout">
    <nav class="sidebar hide-mobile">...</nav>
    <main class="main-content" data-cjx-entrance>
      <!-- Content matching UI_SPEC exactly -->
    </main>
  </div>
  <script src="interactions.js"></script>
</body>
</html>

Style Presets (Optional)

Preset	Description
`minimalist`	Clean, whitespace
`dashboard`	Data-dense
`dark`	Dark theme

Quality Gates

Check	Requirement
Spec Match	Every screen matches UI_SPEC
Layout	Uses `app-layout`, `main-content`
CJX	Body class + animations
Charts	Real SVG, no placeholders
Responsive	Mobile breakpoint works

GATE 3: Design Validation

Before proceeding to ipa-detail:

User testing completed with 5+ users
Critical issues addressed
Design matches MVP scope

Next Steps

After generation: run ipa-detail to generate API_SPEC and DB_DESIGN.

3.6 KiB Raw Permalink Blame History