Add design-first workflow aligned with opencode boilerplate

- New commands: /define-design, /update-design, /generate-app (web | flutter | winui3)
- New skills: ui-design, design-tokens, platform-ui-generation
- /add-feature: check design spec before implementation (Step 3.5) and reconcile all six persistent docs after implementation (Step 8)
- /setup-project: automatic document creation with self-check checkpoints
- CLAUDE.md: document docs/design/, .claude/ configuration, and the design phase in the development process
- Enrich subagent descriptions; allowlist new skills in settings.json
- Add docs/design/README.md

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

CLAUDE.md

@@ -15,7 +15,7 @@
 2. **Work planning**: Plan "what to do this time" in steering files (`.steering/`)
 3. **Implementation**: Implement according to tasklist.md and update progress as you go
 4. **Verification**: Testing and operation checks
-5. **Update**: Update documents as needed
+5. **Update**: Reconcile all `docs/` documents with the implemented feature (see `/add-feature` Step 8)
 
 ### Important Rules
 
@@ -78,6 +78,14 @@ Define "what to build" and "how to build it" for the entire application:
 - **development-guidelines.md** - Development guidelines
 - **glossary.md** - Ubiquitous language definitions
 
+#### Design Documents (`docs/design/`)
+- **design-brief.md** - UI/UX direction
+- **design-tokens.json** - Styling tokens (source of values)
+- **ui-blueprint.json** - UI structure (source of truth for UI generation)
+- **platform-mapping.md** - How the design maps to Web / Flutter / WinUI 3
+- **screens/\*.svg** - Visual wireframes (references only)
+- Created by `/define-design`, updated by `/update-design`, consumed by `/generate-app` and `/add-feature`
+
 ### Work-Unit Documents (`.steering/`)
 
 Define "what to do this time" for a specific development task:
@@ -86,13 +94,22 @@ Define "what to do this time" for a specific development task:
 - `design.md`: The design of the changes
 - `tasklist.md`: The task list
 
+### Claude Code Configuration (`.claude/`)
+
+- `.claude/agents/` - Subagent definitions (doc-reviewer, implementation-validator)
+- `.claude/commands/` - Slash commands (setup-project, define-design, generate-app, update-design, add-feature, review-docs)
+- `.claude/skills/` - Task-specific skills (prd-writing, functional-design, architecture-design, repository-structure, development-guidelines, glossary-creation, ui-design, design-tokens, platform-ui-generation, steering)
+
 ## Development Process
 
 ### Initial Setup
 
 1. Use this template
-2. Create persistent documents with `/setup-project` (interactively creating six)
-3. Implement features with `/add-feature [feature]`
+2. Create persistent documents with `/setup-project` (automatically creating six)
+3. Define the UI/UX design with `/define-design` (creates `docs/design/`)
+4. Review and refine the UI/UX with `/update-design` (or re-run `/define-design`) until approved — before generating code
+5. Generate the initial app with `/generate-app web | flutter | winui3`
+6. Implement features with `/add-feature [feature]`
 
 ### Day-to-Day Usage
 
@@ -107,6 +124,11 @@ Define "what to do this time" for a specific development task:
 # Adding features (use commands for the standard flow)
 > /add-feature edit user profile
 
+# Design phase
+> /define-design
+> /generate-app web
+> /update-design add a profile screen
+
 # Detailed review (when a detailed report is needed)
 > /review-docs docs/product-requirements.md
 ```
@@ -118,8 +140,8 @@ Define "what to do this time" for a specific development task:
 ### Persistent Documents (`docs/`)
 
 - Describe the fundamental design
-- Not updated frequently
 - The "north star" for the entire project
+- **Kept in sync with every feature**: at the end of `/add-feature` (Step 8), all six documents are reconciled with the implemented feature (product-requirements, functional-design, architecture, repository-structure, development-guidelines, glossary)
 
 ### Work-Unit Documents (`.steering/`)