Skill: 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

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):

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