design

Create a unique visual design by synthesizing from inspirations and preferences.

---

Philosophy

Don't follow templates. Every portfolio should feel like it was designed specifically for this person.

• Blend inspirations, don't copy them
• Let the person's story drive the design
• Be bold - safe designs are forgettable

---

Using Design Inspirations

If design_inspirations is provided in profile.yaml, each has attributes you can reference:

design_inspirations:
  - name: "Linear"
    attributes:
      fontFamily: "Inter"
      fontSize: 15
      colorBg: "#000000"
      colorAccent: "#5e6ad2"
      maxWidth: 1200
      sectionSpacing: 100
      borderRadius: 0
      # ... etc

How to Synthesize

Don't just average the values. Think about what makes each inspiration special:

1. Identify the essence of each inspiration

   • Linear: Clean precision, subtle animations, developer-focused
   • Stripe: Gradient magic, depth, polish
   • Brutalist site: Raw honesty, no decoration

2. Find the common thread for this person

   • What do their chosen inspirations say about their taste?
   • What feeling should the portfolio evoke?

3. Create something new

   • Take the typography approach from one
   • The color philosophy from another
   • The layout concept from a third
   • But make it cohesive

Example Synthesis

User picked: Linear + Poolsuite + The Verge

• Linear → Clean typography, dark mode, precision
• Poolsuite → Playful, retro, personality
• The Verge → Bold headers, editorial feel

Synthesis: A dark, clean base (Linear) with playful accent moments (Poolsuite) and bold editorial typography (Verge). Not a mashup - a new thing.

---

Typography

See .agent/skills/fonts.md for font selection.

Rules: 1-2 fonts max, clear hierarchy, match the person's vibe.

---

Color

See .agent/skills/colors.md for palettes.

Rules: 60-30-10 ratio, good contrast, avoid purple/blue gradients.

---

Layout

Think Structure First

Before designing, ask:

• How much content does this person have?
• What's most important to show?
• How do visitors want to consume this?

Avoid the Resume Trap

Don't create a resume disguised as a website. The rigid hero → about → experience → education → skills → contact structure is a failure state. That's what everyone does, and it makes every portfolio feel interchangeable.

Instead, think about:

• What makes this person's story unique? Lead with that.
• What's the one thing visitors should remember? Structure around it.
• How can information flow naturally instead of being boxed into sections?

Bad: "About Me" followed by "My Experience" followed by "My Skills" Good: A narrative that weaves work, personality, and projects together

Layout Options

| Approach | Good For | |----------|----------| | Single page scroll | Simple, narrative flow | | Multi-page | Lots of content, distinct sections | | Single screen | Minimal, high impact | | Case study format | Project-focused, detailed work | | Timeline/narrative | Career progression story | | Interactive/exploratory | Creative technologists | | Conversational/story | Personality-driven, writers | | Work-first | Let projects speak, minimal bio |

Breaking the Mold

Don't default to sections. Consider:

• What if there's no "About" section and the bio is woven throughout?
• What if projects aren't in a grid but in a narrative?
• What if the whole page is one big statement?
• What if experience is shown through projects instead of a job list?
• What if the contact isn't a section but integrated naturally?

---

Spacing & Rhythm

Principles

• Generous whitespace > cramped content
• Consistent rhythm - Pick a scale (8px, 16px, 32px, 64px) and stick to it
• Let content breathe - Especially on luxury/minimal designs

From Inspirations

If inspirations have sectionSpacing and padding attributes, use them as starting points but adjust for the content.

---

Animation & Motion

Based on design.animation preference (1-10):

| Level | Approach | |-------|----------| | 1-3 | Static, hover states only | | 4-6 | Subtle page transitions, gentle fades | | 7-8 | Scroll animations, choreographed entrance | | 9-10 | Rich motion, interactive elements |

Tools

• Tailwind transitions for simple effects
• Framer Motion for complex animations
• CSS animations for repeating motion

---

Preference Sliders

Creativity (1-10)

• Low: Safe, conventional, expected
• High: Experimental, surprising, risky

Simplicity (1-10)

• Low: Dense, information-rich, complex
• High: Minimal, focused, essential only

Playfulness (1-10)

• Low: Serious, professional, formal
• High: Fun, personality-driven, casual

Color Intensity (1-10)

• Low: Monochrome, muted, subtle
• High: Vibrant, bold, saturated

---

Making It Not Look AI-Generated

1. Imperfection - Slight asymmetry, varied spacing, human touches
2. Specificity - Generic = AI. Specific = human.
3. Personality - Let the person's voice come through
4. Unexpected choices - Do something that surprises
5. Real content - No placeholders, no lorem ipsum

---

Execution Checklist

Before calling the design done:

• [ ] Typography creates clear hierarchy
• [ ] Colors work together and have meaning
• [ ] Layout serves the content (not the other way around)
• [ ] Spacing feels intentional
• [ ] Mobile experience is considered
• [ ] It doesn't look like a template
• [ ] It feels right for THIS person