design-recipes

Files (3)

• SKILL.md
• figma.md · reference/
• pencil.md · reference/

SKILL.md (first lines)

# Design Recipes

> Tested patterns for assembling screens efficiently. Tool-agnostic patterns with tool-specific implementations.

## When to Load

Load this skill during the **Design Execution GATE** in the orchestration pipeline — after the designer produces ui-spec.md and before executing the visual design.

## Workflow

### Step 0 — Load Pencil Guidelines (if .pen file)

Before building ANY screen, load the Pencil guidelines that match the project type:

1. **Detect project type** from the PRD/ui-spec:
   - SaaS dashboard, admin panel, CRM → `get_guidelines("guide", "Web App")`
   - Landing page, marketing site → `get_guidelines("guide", "Landing Page")`
   - Mobile app → `get_guidelines("guide", "Mobile App")`
   - Data-heavy screens, tables → `get_guidelines("guide", "Table")`
   - Design system work → `get_guidelines("guide", "Design System")`

2. **Explore visual styles** — Pencil offers curated style archetypes. Before starting:
   - Run `get_guidelines()` to see available styles
   - Pick a style that matches the domain (e.g., "Soft Bento" for friendly SaaS, "Aerial Gravitas" for enterprise, "Editorial Scientific" for data-heavy apps)
   - Load it: `get_guidelines("style", "<chosen style>")`

3. **Apply guidelines alongside recipes** — Pencil guidelines define principles (hierarchy, density, feedback). Recipes below define structure. Use both.

### Step 1 — Build Screens

1. Detect the design tool:
   - `.pen` file → load `reference/pencil.md`
   - Figma URL or `.fig` → load `reference/figma.md`
2. Identify which screen types you're building
3. Follow the recipe for each type
4. Verify with screenshot after each screen

## Screen Type Recipes

### Recipe 1: Auth Screen (Login, Register, Verify)

**Pattern:** Split layout — brand panel (left/top) + form panel (right/bottom)

**Structure:**
```
Desktop (1440×900):
┌──────────────┬─────────────────────────┐
│ Brand Panel  │     Form Panel          │
│ 560px        │     fill_container      │
│ Primary bg   │     Centered card       │
│ Logo+tagline │     Title+fields+CTA    │
└──────────────┴─────────────────────────┘

Mobile (375×812):
┌─────────────────────┐
│ Brand Header (compact) │
│ Primary bg, 1 line     │
├─────────────────────┤
│ Form (full width)      │
│ Title+fields+CTA       │
└─────────────────────┘
```

**Components needed:** InputGroup, InputPassword, Button/Primary, Button/Ghost
**Operations:** ~12 desktop, ~10 mobile
**Reuse tip:** Build Login first, then Copy for Register/Verify and modify content

### Recipe 2: App Shell (Nav + Content)

**Pattern:** Top nav + scrollable content area

**Structure:**
```
Desktop:
┌─────────────────────────────────────────┐
│ NavBar (ref, fill_container width, 64h) │
├─────────────────────────────────────────┤
│ Content area (padding 32-48, vertical)  │
│ ├── Page header (title + actions)       │
│ ├── Content sections                    │
│ └── Pagination (if table)               │
└─────────────────────────────────────────┘

Mobile:
┌─────────────────────┐
│ Mobile Nav (56h)     │
│ ☰  Logo  👤         │
├─────────────────────┤
│ Content (padding 16) │
└─────────────────────┘
```

**Components needed:** NavBar (desktop) or MobileNav, Avatar
**Reuse tip:** Build one app shell, Copy for each page, replace content only

### Recipe 3: Data Table Page

**Pattern:** Header + filters + table + pagination

**Structure:**
```
Content area:
├── Page header: Title (left) + Primary button (right)
├── Filters row: Dropdown selects (horizontal)
├── Table card (surface bg, rounded, border):
│   ├── Header row (neutral-50 bg): column labels
│   ├── Data rows: cells with text/badges
│   └── Last row: no bottom border
└── Pagination: info text (left) + prev/next buttons (right)
```

**Table row pattern (CRITICAL):**
```
Row (horizontal, fill_container, padding [14, 20], bottom border)
├── Cell 1 (frame, width: fill_container or fixed) → content
├── Cell 2 (frame, width: fill_container or fixed) → content
├── Cell N (frame, width: fixed for badges/dates) → badge/text
```

From ernesto2108/forge, MIT.

More from ernesto2108/forge