Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

PalateKit Pick

Polished web pages, decks and prototypes v1.0.0

Use this resource to design a polished web page, deck or prototype

New

  • 457 downloads
  • 209 likes
  • 109 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install web-design-engineer

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent first checks the facts about your product, asks the right questions, then proposes a design system (colors, typography, spacing) for you to confirm before writing code. It shows a quick first draft, builds the full version, then runs it through a checklist. You get a ready-to-open HTML file that matches your brand and avoids the usual AI-page clichés.

Mostly picked by

Updated November 2, 2026

Clean product landing page with a large headline, a Buy button and two soft-rendered earbuds.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all
  • Free

    Video

    App window with zoom

    • 365365 downloads
    • 125125 likes
    • 188188 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • Free

    Video

    One big number

    • 463463 downloads
    • 223223 likes
    • 100100 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three bars head to head

    • 348348 downloads
    • 133133 likes
    • 182182 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Before / after slider

    • 322322 downloads
    • 248248 likes
    • 238238 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three-card carousel

    • 418418 downloads
    • 157157 likes
    • 101101 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Chat exchange

    • 564564 downloads
    • 127127 likes
    • 161161 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Checklist ticking off

    • 442442 downloads
    • 233233 likes
    • 160160 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames

What you get

  • SKILL.md: eight-step method with checkpoints
  • 25 style recipes (Linear, Aesop, Apple HIG, MUJI…) with palettes and typefaces
  • Guides for calibration, redesign, critique and browser acceptance
  • Code patterns: slide decks, device frames, tweaks panel, charts

Good fit for

  • Building a launch page for a product or offer
  • Making an HTML deck or a clickable prototype
  • Redesigning an existing page without losing brand identity

Not for

  • Back-end code or data-processing scripts
  • Converting a long article into a web page
  • A quick color tweak that needs no method

Tags

  • html
  • design
  • prototype
  • slides
  • landing page

About

You say

"Design the launch page for my online course in a calm editorial style, with three variants to compare."

Clean product landing page with a large headline, a Buy button and two soft-rendered earbuds.

Skill published by conardli under the MIT license.

Show more

Prerequisites

You bring
The project brief (audience, goal) and Your logo and brand guidelines if any

How to use it

  1. Describe your project and share your logo, copy and brand references if you have them.
  2. Confirm the proposed design system, then the first draft.
  3. Ask for variants or the critique, then take the HTML file.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/advanced-patterns.md14.9 KB
  • references/block-library.md1.8 KB
  • references/browser-acceptance.md4.7 KB
  • references/critique-guide.md10.4 KB
  • references/design-calibration.md6.1 KB
  • references/design-directions.md14 KB
  • references/failure-patterns.md7.1 KB
  • references/redesign-protocol.md4.2 KB
  • references/style-recipes/active-theory.md2.6 KB
  • references/style-recipes/aesop.md2.8 KB
  • references/style-recipes/apple-hig.md3.1 KB
  • references/style-recipes/are-na.md2.2 KB
  • references/style-recipes/balenciaga-post-2017.md2.4 KB
  • references/style-recipes/bloomberg-businessweek-turley.md2.6 KB
  • references/style-recipes/bloomberg-terminal.md2.8 KB
  • references/style-recipes/dieter-rams-braun.md2.6 KB
  • references/style-recipes/field-io.md2.9 KB
  • references/style-recipes/headspace-meditation.md2.7 KB
  • references/style-recipes/INDEX.md12 KB
  • references/style-recipes/linear.md3.2 KB
  • references/style-recipes/mailchimp-freddie.md2.5 KB
  • references/style-recipes/mid-century-modern.md2.7 KB
  • references/style-recipes/monocle-magazine.md2.6 KB
  • references/style-recipes/muji-kenya-hara.md2.7 KB
  • references/style-recipes/notion-pre-ai.md2.9 KB
  • references/style-recipes/nyt-the-daily.md2.7 KB
  • references/style-recipes/pentagram.md2.8 KB
  • references/style-recipes/raycast.md3.2 KB
  • references/style-recipes/resn-storytelling.md2.4 KB
  • references/style-recipes/stripe-press.md2.9 KB
  • references/style-recipes/tufte-dataink.md2.6 KB
  • references/style-recipes/vercel-mesh.md3 KB
  • references/style-recipes/vignelli-swiss-helvetica.md2.5 KB
  • references/style-recipes/y2k-retrofuturism.md2.7 KB
  • SKILL.md35.1 KB

Origin and licence

Modified by PalateKit

Author
conardli
Source
github.com/conardli/garden-skills/tree/2b9a89340b70f632d31c0f1c69fce94a7912423e/skills/web-design-engineer
Licence
MIT

Notice

Version modifiée de « web-design-engineer » (conardli, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do the references need to be installed with the skill?

Yes. Copy the whole folder: the main file points to guides in references/, loaded only when needed.

Can it follow my brand guidelines?

Yes. Provide your logo, colors and screenshots: the agent records them in a brand-spec.md file and reuses them throughout.