ken/opencode-boilerplate
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add design phase and platform app generation phase

Browse Source 
Add a UI/UX design phase (/define-design, /update-design) and a platform
app generation phase (/generate-app web|flutter|winui3) to the workflow,
positioned between /setup-project and /add-feature.

- commands: define-design, generate-app, update-design
- add-feature: check docs/design/ before implementation; update design
  files first when a feature changes the UI
- skills: ui-design, design-tokens, platform-ui-generation
- docs/design/ structure documented (source of truth = ui-blueprint.json;
  SVGs are references only; generated UI follows design-tokens.json)
- README and AGENTS.md updated with the new workflow
This commit is contained in:
Ken Yasue
2026-06-28 18:41:01 +02:00
parent e1ef10be6e
commit f57921abad
10 changed files with 1004 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
AGENTS.md
View File

@ -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:
@ -89,16 +97,18 @@ Define "what to do this time" for a specific development task:
### opencode Configuration (`.opencode/`)
- `.opencode/agent/` - Subagent definitions (doc-reviewer, implementation-validator)
- `.opencode/command/` - Slash commands (setup-project, add-feature, review-docs)
- `.opencode/skills/` - Task-specific skills (prd-writing, functional-design, architecture-design, repository-structure, development-guidelines, glossary-creation, steering)
- `.opencode/command/` - Slash commands (setup-project, define-design, generate-app, update-design, add-feature, review-docs)
- `.opencode/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. Generate the initial app with `/generate-app web | flutter | winui3`
5. Implement features with `/add-feature [feature]`
### Day-to-Day Usage
@ -113,6 +123,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
```