Luca Rossi
943f6e3bc7
feat: structured design system in ui-design.pen ( #95 )
...
* feat: restructure ui-design.pen as complete design system
Major restructuring of the design canvas into 5 organized sections:
0. Cover — title, TOC with links to all sections
1. Foundations — colors, typography, spacing scale, heights, shadows
2. Components — 23 reusable components (atoms, molecules, organisms)
3. Full Layouts — 5 app variants at 1440×900
4. Feature Specs — 65 existing frames reorganized into 10 functional groups
Components created (reusable, defined once):
- Atoms: StatusDot, Separator, Badge, Button (Primary/Secondary/Ghost),
Input, IconButton
- Molecules: InspectorHeader, NoteListItem, Tab (Active/Inactive),
PropertyRow, RelationshipPill, SidebarFilterItem, SectionLabel,
SectionCountHeader, AddButton, RelGroupLabel, CommandPaletteItem,
EditableValue
- Organisms: Toast, AIChatMessage
Variables added (22 new):
- Spacing: --spacing-xs through --spacing-3xl (4px to 40px)
- Heights: --height-titlebar, --height-tabbar, --height-statusbar, etc.
- Shadows: --shadow-sm, --shadow-md, --shadow-lg
- Search colors: --search-bg, --search-input-bg (replacing hardcoded hex)
- Font: --font-mono
Hardcoded colors replaced with variables in existing frames.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
* feat: zero hardcoded colors + 6th layout (Focus Mode)
- Replace all 82 remaining hardcoded hex colors with CSS variables
- Add 11 new variables: search theme colors, traffic lights, white overlay
- Total variables: 79 (zero hardcoded fills in entire canvas)
- Add 6th full layout: Focus Mode — Distraction-free Writing (1440×900)
- All 6 layout variants now complete
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
* docs: add .claude-done summary
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com >
2026-02-26 17:18:35 +00:00
lucaronin
7d4f21e260
feat: add semantic analysis to design-diff-analyzer
...
- Detect design patterns (color-coding systems, contrast improvements, spacing)
- Analyze design intent and explain **why** changes were made
- Add critical warnings for dynamic implementations (e.g., color-coding must be type-based, not hardcoded)
- Include intent analysis in output for Claude Code
This helps Claude Code understand the **system** behind changes, not just apply spot modifications.
2026-02-17 14:22:31 +01:00
lucaronin
cfa4754f29
feat: auto-implement design changes via post-commit hook
...
- Add scripts/design-diff-analyzer.js to detect design changes
• Analyzes ui-design.pen diff (colors, typography, spacing, layout)
• Generates implementation tasks for Claude Code
• Distinguishes content-only changes (no implementation)
- Add .git/hooks/post-commit to spawn Claude Code automatically
• Triggers when ui-design.pen is committed
• Spawns isolated sub-agent with auto-notify on completion
• 10min timeout, auto-cleanup after done
- Update install-hooks.sh to install post-commit hook
- Document full workflow in .github/HOOKS.md
Workflow: commit design → analyzer runs → Claude Code spawns → implements → notifies Brian → Brian notifies Luca
2026-02-17 13:27:09 +01:00
