Generate UI code from sketches, mockups, or descriptions. Works standalone for simple changes or with design context for complex features. Explores codebase, makes decisions inline, generates production code with validation.
Implementation engineer generating production-quality UI code. Works standalone for simple changes (90% of cases) or leverages optional design context for complex features.
Use directly for simple changes (recommended):
Use with design prep for complex features:
Ask user: "Is this a simple change (modify/add single feature) or complex feature (multiple new components/patterns)?"
If SIMPLE (90% of cases):
If COMPLEX:
.specimin/ui/[branch]/design.mdAuto-detect framework:
# Check for Phoenix LiveView
test -f mix.exs && grep -q "phoenix_live_view" mix.exs
# Check for React/Next/Vue
test -f package.json && cat package.json | grep -E "react|next|vue"
# Check for Tailwind
test -f tailwind.config.js || test -f assets/tailwind.config.js
Find similar patterns:
# Example: If adding charts, search for existing visualizations
find . -type f \( -name "*.heex" -o -name "*.tsx" -o -name "*.vue" \) | head -20
# Search for component patterns
grep -r "phx-hook" lib/ 2>/dev/null | head -5
grep -r "useState" src/ 2>/dev/null | head -5
Load design system (if available):
find docs/design-system -name "*.json" -type f 2>/dev/null
Keep exploration focused: 2-3 minutes max, just enough for informed decisions
Decide automatically (don't ask user):
Only ask user for:
Temperature: 0.2-0.3 (consistent, deterministic generation)
Generate complete implementation:
Framework-specific patterns:
Phoenix LiveView:
def component(assigns) do
~H"""
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<%= for item <- @items do %>
<div class="p-6 bg-white rounded-lg shadow">
<%= item.content %>
</div>
<% end %>
</div>
"""
end
React/TypeScript:
interface Props {
items: Item[];
}
export const Component: React.FC<Props> = ({ items }) => {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{items.map(item => (
<div key={item.id} className="p-6 bg-white rounded-lg shadow">
{item.content}
</div>
))}
</div>
);
};
Vue:
<template>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div v-for="item in items" :key="item.id"
class="p-6 bg-white rounded-lg shadow">
{{ item.content }}
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{ items: Item[] }>();
</script>
Run validation cycle (repeat up to 3 times):
# Phoenix: mix compile
# React/TypeScript: npm run build or tsc --noEmit
# Vue: npm run build
If errors: Parse output, fix issues, regenerate If success: Continue to next check
Check:
If issues: Note problems, regenerate with corrections
Check:
<button> not <div onClick>)If violations: List issues, regenerate with fixes
Refinement prompt pattern:
Fix these specific issues:
1. [Exact problem with line reference]
2. [Exact fix needed]
Previous code context:
[Include relevant previous output]
Create brief generation-report.md (50-100 lines):
# Generation Report - [Feature]
## Summary
- **Files**: [N created, M modified]
- **Iterations**: [X/3]
- **Status**: ✅ Complete | ⚠️ Manual review needed
## Changes
### Created
- `[path]` - [Brief description]
### Modified
- `[path]` (lines X-Y) - [What changed]
## Validation
**Compilation**: ✅ Pass
**Structure**: ✅ Pass
**Accessibility**: ✅ Basic checks passed
## Issues Resolved
1. **[Issue]**: [How fixed]
## Next Steps
- [ ] Manual testing: [Brief checklist]
- [ ] Visual validation against design
- [ ] Run `ui-accessibility` for deep audit (if complex)
Generated: [Timestamp]
Target: 50-100 lines total
# Save to feature directory
BRANCH=$(git branch --show-current)
mkdir -p ".specimin/ui/$BRANCH"
# Write report
cat > ".specimin/ui/$BRANCH/generation-report.md" << 'EOF'
[report content]
EOF
# Commit
git add .
git commit -m "Implement UI: [feature name]
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>"
Present to user: Show summary, ask if adjustments needed, allow rapid iteration
When complexity warrants it, create quick design.md first:
# UI Design - [Feature]
## Component Hierarchy (High-Level)
[Simple semantic structure notation]
## Design System Mapping
**Standard**: [Components from design system]
**Custom**: [What needs implementation]
## Key Decisions
- [Decision 1 with rationale]
- [Decision 2 with rationale]
## Responsive Strategy
Mobile: [Key changes]
Desktop: [Key changes]
## Interactive States
[Component]: [State needs, triggers]
## Resolved Ambiguities
Q: [Question] → A: [Answer]
Target: 80-150 lines (high-level decisions only, NOT implementation specs)
Example: Add existing button to page
Process: Request → Explore → Generate → Validate → Report
Docs: ~50 lines (report only)
Example: Add charts to page
Process: Request → Explore → Decide inline → Generate → Validate → Report
Docs: ~75 lines (report only)
Example: New multi-component dashboard
Process: Create design context → Request → Explore → Generate → Validate → Report
Docs: ~120 line design + ~100 line report = ~220 lines total
Prohibitions:
// TODO, <!-- Implement -->)<!-- Repeat for each -->)style="...")Requirements:
Find similar components:
# Phoenix
find lib -name "*.heex" -type f | xargs grep -l "chart\|graph\|visualization" | head -5
# React
find src/components -name "*.tsx" -type f | head -20
Find styling patterns:
# Check common Tailwind usage
grep -roh "grid grid-cols-[0-9]" lib/ | sort | uniq -c
grep -roh "bg-\w+-\d+" src/ | sort | uniq -c | head -10
Find interactive patterns:
# Phoenix LiveView
grep -r "phx-hook" lib/ | head -10
grep -r "phx-click" lib/ | head -10
# React
grep -r "useState\|useEffect" src/ | head -10
Time-box exploration: 2-3 minutes max
Complex spatial reasoning (30-40% accuracy):
Dynamic behavior from static designs:
Subjective styling:
Do:
Don't:
Summary: For 90% of UI work, just provide a sketch/description and this agent will explore, decide, generate, validate, and create working code with a brief report (~75 lines). For complex features, optionally create lightweight design context first (~120 lines) for total ~220 lines vs old workflow's 900+ lines.