Syntic
All playbooks

Playbook

Creative & Visual 4 min read

Create a custom webpage with your AI Web Designer Employee

Your AI Web Designer Employee reads your resume and design references, dispatches an Syntic Build Specialist Agent that ships a working portfolio site, then walks you through deployment — no code on your end.

  • Workforce role AI Web Designer Employee
  • Vertical Personal / Creative
  • Agent Syntic Build Specialist Agent
  • Capabilities Vision, code generation, deployment guidance
  • Share Copy link

The request

Your AI Web Designer Employee reads images and writes code. Hand it your resume and a few design references, and it dispatches a Syntic Build Specialist Agent that ships a portfolio reflecting both your professional narrative and your visual taste.

Tell the Designer to build your portfolio from your uploads. Specify design preferences and that you'll need deployment guidance.

"Ship me a professional portfolio HTML page to showcase my career and accomplishments. I've uploaded my resume, project descriptions, and design inspiration. Use them to understand my background and aesthetic."

"Direction: sophisticated and editorial — high-end creative agency, not corporate template. Avoid generic layouts, gradient soup, or too much symmetry. The sites I admire (in the uploads) have an organic, hand-crafted quality with unexpected details."

"After the Build Agent ships, walk me through publishing it live. Assume I've never deployed a website — I need exact steps that don't require coding."

How the Designer briefs the Agent

Hand the Designer your background and design preferences so the Build Agent ships a site that authentically represents your work.

What the Agent needs

Upload files that capture your story — resume, past projects, achievements you want to highlight.

Add anything that conveys your aesthetic. Screenshots of portfolios you admire or UI snippets from designs you like help the Build Agent understand the direction.

Resume PDF. Project descriptions (3-5 detailed examples). Design inspiration screenshots.

Optional context

Turn on Extended Thinking so the Designer spends more time on the brief and the Build Agent ships higher-quality outputs.

Extended Thinking enabled.

What ships back to chat

The Build Agent ships a complete portfolio page as an HTML artifact — your professional information, project showcases, and design choices that match your taste.

"Shipped your portfolio site. The design pulls from the editorial, hand-crafted aesthetic in your inspiration files — I avoided symmetrical layouts and corporate templates in favor of something more organic. The tape effects you mentioned appear on project cards, and I added subtle scroll animations that activate as you move through the page."

"Your resume structures the About section, while your project descriptions each get a showcase area with space for images and details. The typography uses a serif-sans pairing that matches the sophisticated tone you wanted, and the color palette comes from analyzing your design references."

View your portfolio webpage

"Open this in any browser. If you want to adjust colors, change project order, or tweak text, tell me what you'd like different."

Follow-up dispatches

Keep the loop going — the Designer dispatches new Agents as the site grows.

Deploy your site live

The Designer connects to Netlify and dispatches a Deployment Agent that takes your artifact's code and ships it as a live website — no coding on your end.

"Use the code from my portfolio artifact. Use my Netlify connector, create a new site, and walk me through deployment. Give me the URL once it's live, and explain how I update the site later."

Build interactive effects

Add polish through coded animations and interactions. The Designer dispatches a Build Agent that writes HTML, CSS, and JavaScript for hover effects, scroll animations, or interactive elements.

"Add hover effects on the project cards — maybe a subtle shift or border change. When I scroll to a section, fade the heading in slightly. Nothing flashy, just refined interactions."

Expand one project into a case study

Deep-dive into your most important work with the full design process.

"Take the Infrastructure Monitoring Dashboard project and expand it into a full case study page. Include the problem, research, design process, iterations, challenges, how we solved them, and measurable impact. Add sections for wireframes, user feedback, and lessons learned."

Tips for the workforce loop

Push past default design choices

The Build Agent can default to functional design — standard fonts, default colors, adequate spacing. For sharper outputs: reference quality benchmarks ("top-tier consulting report," "premium SaaS product"), frame the Designer as a domain expert ("approach this as a senior designer would"), or have it grade and refine its own output. Tell it what not to do too. Iteration usually wins — after the first ship, assess what's missing and reissue the brief.

Use Skills for consistent standards

Create a Skill that packages your visual references, successful examples, and design preferences so the Designer applies your standards without re-explaining every time. Have a quick conversation with the Designer to bundle your formatting preferences, aesthetic direction, and quality bar into a reusable workflow.

Onboard your AI Web Designer

Hire an AI Web Designer Employee inside Syntic and ship a portfolio that represents your work — built and deployed without writing code.

Run this play yourself

Spin up Syntic free and bring your context. Most teams ship their first dispatch in under an hour.