Skill: Design Skill | Agent Skills

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:

Identify the essence of each inspiration
- Linear: Clean precision, subtle animations, developer-focused
- Stripe: Gradient magic, depth, polish
- Brutalist site: Raw honesty, no decoration
Find the common thread for this person
- What do their chosen inspirations say about their taste?
- What feeling should the portfolio evoke?
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

Imperfection - Slight asymmetry, varied spacing, human touches
Specificity - Generic = AI. Specific = human.
Personality - Let the person's voice come through
Unexpected choices - Do something that surprises
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

Agent Skills: Skill: Design

Install this agent skill to your local

Skill Files