skills.rest
b12io
b12ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

designer

Design web page mockups as self-contained HTML files with palette and typography rationale.

10|Updated Feb 5, 2026
Search Tags:#typography#html#landing page#web design#palette#mockup#redesign
One-click install
npx skills add https://github.com/b12io/b12-plugins --skill designer-b12io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/b12io/b12-plugins/tree/main/plugins/designer/skills/designer
Command: npx skills add https://github.com/b12io/b12-plugins --skill designer-b12io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns a short description of a business into a finished, judgeable web page mockup — a single self-contained HTML file with real palette, type pairing, and hierarchy — so users can react to an actual design instead of imagining one. ## Core Features & Use Cases - Page mockups as single HTML files: Designs homepages, pricing pages, about pages, and landing pages delivered as one self-contained HTML file with inline styles, system fonts, and no external assets. - Explained design decisions: States the palette with hex values, the type pairing, and the visual hierarchy, plus two alternate directions the user can pick by name. - Redesigns from pasted content or screenshots: Restyles existing pages from pasted HTML, copy, or screenshots while keeping the user's real words and marking invented facts as bracketed placeholders. - Use Case: A user says "design a pricing page for my yoga studio" and receives a complete responsive HTML mockup with a justified palette, placeholder slots for prices, and two alternative directions to react to. ## Quick Start Ask the designer to mock up a homepage for your business by describing what the business does in a few words.

Frequently Asked Questions about designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get a web page mockup from a business description?▼

Describe what the business does in a few words and optionally name the page type, such as homepage or pricing page. The skill asks one short question if the description is missing, then delivers a complete self-contained HTML mockup with the design rationale.

How do I redesign an existing web page with this skill?▼

Paste the page's HTML or copy, or attach a screenshot of it, and the skill redesigns around that content while keeping your words. URLs cannot be opened, so a paste or screenshot is required.

Does the mockup use web fonts or external images?▼

No. The HTML file is fully self-contained: system font stacks only, no web fonts, no hotlinked images, and no CDN scripts. Imagery is represented with inline SVG, CSS gradients, or labeled placeholder panels so the file opens correctly offline.

Can the designer skill write production code in a specific framework?▼

No. When a technology is named, such as "a homepage in HTML and CSS" as a code request, the skill treats it as a coding task and defers. It produces design mockups to react to, not production source code, logos, or generated photos.

What happens to real business details like prices and testimonials in the mockup?▼

Factual slots the user did not supply — prices, testimonials, addresses, statistics — are rendered as bracketed placeholders like [$29/mo] so nothing invented looks real. The reply lists which slots are placeholders.

Related Skills

Explore More Design & Creative Skills→
FirzusFirzus
1

real-content

Replace greyboxed placeholders with final copy, imagery, and data.

Community
Advanced
Marky-TeamMarky-Team
3

build-brand-kit

Extract brand assets and guidance from a business website into Marky.

Official
Advanced
theexperiencecompanytheexperiencecompany
261

landing-page-copywriter

Generate landing page copy using PAS, AIDA, and StoryBrand frameworks.

Official
Intermediate
MoxyWolfLLCMoxyWolfLLC

screenshot-to-code

Convert UI screenshots into HTML, CSS, React, or Vue code.

Official
Intermediate