Files

Deploy to Production / Build and Deploy (push) Successful in 12s

Details

feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

2026-05-16 12:59:30 +00:00

2.1 KiB

Raw Blame History

name, description, borrows_from

name	description	borrows_from
design-solution	Sketch and specify the update for a scoped improvement	Phase 4 (UX design)

Design Solution

Goal: Design the solution for a scoped improvement — from quick sketch to development-ready specification.

INITIALIZATION

Design Log

Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.

Steps

Step 1: Load Scenario

Read the scenario from [S] Scope Improvement:

Target description
Current vs desired state
User journey
Pages and components affected

Step 2: Choose Design Approach

Based on the change scope, pick an approach:

Quick fix — Small visual/copy change → Skip to Step 4 (specify directly)
Sketch first — Layout or flow change → Sketch the before/after, then specify
Generate design — Significant visual change → Use Phase 6 asset generation tools

Step 3: Design the Change

For sketch or generate approaches:

Before snapshot — Capture or describe the current view
After concept — Sketch, generate, or describe the desired view
Diff view — Explicitly mark what changes: layout, components, content, behavior
Edge cases — What happens on mobile? With long text? With empty state?

Present design to user for feedback. Iterate until approved.

Step 4: Write Specification

Create a mini page-spec at {output_folder}/evolution/specs/:

# [Page/View Name] — Update Specification

## Change Summary
[One paragraph describing the change]

## Before
[Current state description or reference]

## After
[Detailed specification of the new state]

## Components
[List each component with its new properties/behavior]

## Responsive Behavior
[How the change adapts across breakpoints]

## Acceptance Criteria
[Testable criteria from the scenario]

Step 5: Approve Specification

Present the specification for user sign-off:

Does it match the scenario intent?
Are acceptance criteria testable?
Is scope still manageable?

AFTER COMPLETION

Update design log
Suggest next action
Return to activity menu

2.1 KiB Raw Blame History