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.

Brand identity and web visual direction v1.0.0

Use this resource to define the visual identity and design direction of a website

New

  • 352 downloads
  • 164 likes
  • 239 saves

Free

Install with the CLI

In a terminal, from the folder you want:

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

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 starts with discovery (goal, audience, brand personality), then proposes two or three visual concepts with an OKLCH palette, typography and signature elements. It checks hierarchy, contrast and responsiveness. You get a brand guide, design specifications and component examples.

Mostly picked by

Updated November 2, 2026

Card for the web design and brand identity skill.

Details

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

Similar resources

View all

What you get

  • SKILL.md: process, OKLCH, anti-patterns, deliverables
  • references/layout-systems.md: grids, spacing, breakpoints
  • references/color-accessibility.md: palettes, dark mode, WCAG contrast
  • references/tooling-integration.md: 21st.dev and Figma tools

Good fit for

  • Setting the visual identity of a new site
  • Comparing two or three directions before building
  • Checking the visual accessibility of a mockup

Not for

  • Deep typography work
  • Design tokens and CSS architecture
  • Code without a design direction

Tags

  • brand
  • palette
  • oklch
  • layout
  • accessibility

About

You say

"Propose three visual directions for my yoga studio website, with OKLCH palettes."

Card for the web design and brand identity skill.

Skill published by curiositech under the MIT license.

Show more

Prerequisites

You bring
A description of your business and audience and Visual references you like

How to use it

  1. Answer the discovery questions about your business and audience.
  2. Pick among the proposed concepts.
  3. Ask for the brand guide and the component examples.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/color-accessibility.md2.6 KB
  • references/layout-systems.md2.6 KB
  • references/tooling-integration.md2.5 KB
  • SKILL.md7 KB

Origin and licence

Modified by PalateKit

Author
curiositech
Source
github.com/curiositech/some_claude_skills/tree/f49825290077e5fb46bb3e867dfa8a5b0161152b/.claude/skills/web-design-expert
Licence
MIT

Notice

Version modifiée de « web-design-expert » (curiositech, 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

Are the 21st.dev MCP tools required?

No. They provide inspiration and component generation; the method works without them.

Why OKLCH colors?

They give uniform perceived lightness and more reliable contrast than hex.