AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Awwwards-Caliber Website Builder

Turns a one-line prompt into an award-caliber website, covering concept, art direction, motion, WebGL and a screenshot-driven QA loop.

Design & UIAdvanced★ 1,022⑂ 43AI score 9/10Last updated: Oct 26, 2026

What it does

  • Takes a single prompt like "make me a portfolio, my name is Ana" and ships a finished site instead of handing you a questionnaire.
  • Uses the Awwwards rubric (Design 40%, Usability 30%, Creativity 20%, Content 10%) as the quality bar, targeting 8+ in every category.
  • Generates three concepts from different territories, scores them on originality/fit/feasibility/portability, then records the winning Concept Card plus palette, type, grid and motion language in DESIGN.md.
  • Defaults to Next.js (App Router, TypeScript), uses Astro for animation-heavy static showcases, or adopts the project's existing stack. Shared engine: GSAP, Lenis, OGL (Three.js only for real 3D).
  • Runs at least two QA passes on a production build: screenshots, Core Web Vitals, axe accessibility, keyboard order, hover response, idle motion, plus an independent critic subagent re-scoring the result.

Who it's for

  • Designers and developers building portfolios, studio/agency sites or brand launch pages.
  • Freelancers and solo founders who need a landing page that actually impresses, not a template.
  • Frontend engineers who want GSAP/WebGL recipes bundled with accessibility and performance checklists.

Example uses

  1. "Build a photographer portfolio" → writes the Concept Card, curates a coherent Unsplash contact sheet as clearly marked placeholders, and ships case-study pages plus a designed 404 in Next.js.
  2. "A scroll-driven product launch microsite" → static Astro build with an OGL shader signature moment and a deliberately designed reduced-motion fallback.
  3. "Make the landing page in my existing Next.js app award-worthy" → ports only the needed engine pieces into the current router and styling, then iterates QA until mobile LCP is under 2.5s and CLS under 0.05.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/juliobsz/skills/HEAD/awwwards/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the awwwards folder from the GitHub repo juliobsz/skills into my ~/.claude/skills/awwwards/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/juliobsz/skills.git /tmp/juliobsz-skills && mkdir -p ~/.claude/skills && cp -r /tmp/juliobsz-skills/awwwards ~/.claude/skills/awwwards

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js 20 or newer with node -v.
  2. Clone the repository: git clone https://github.com/juliobsz/skills.git /tmp/juliobsz-skills
  3. Copy the skill into place: mkdir -p ~/.claude/skills && cp -r /tmp/juliobsz-skills/awwwards ~/.claude/skills/awwwards
  4. Check that the references/ and scripts/ folders came along inside ~/.claude/skills/awwwards.
  5. Install the browser used for QA screenshots once: npx playwright install chromium.
  6. Restart Claude Code and try a prompt such as "make me a portfolio, my name is ...". To only review an existing site without changing it, use /jury.
View source on GitHub ↗License: MIT