Portable 1.0Designv1.0.0

Frontend Design Agent Plugin

Guide coding agents to create distinctive, intentional interfaces through a concrete aesthetic direction, careful typography, useful structure, and disciplined critique.

View source Install plugin

0 repository stars Apache-2.0 Updated Aug 8, 2026

Direction / 01

specific

by design.

One subject. One job. One visual idea worth remembering.

Resist the default

Explainable standards check

Conforms to Agent Plugins 1.0.0

Official latest version: 1.0.0 (Working Draft). The value is read from the official specification and cached for one day.

Read the official specification

This is a static package-format check, not a security audit, quality score, malware scan, or guarantee of client compatibility.

Canonical manifest schema

plugin.json targets the official 1.0.0 schema.

Agent Plugins specification §5.2

Required name and naming rules

The plugin name “frontend-design” satisfies the 1–64 character naming rules.

Agent Plugins specification §§5.3 and 5.5

Closed top-level schema

No unknown top-level manifest fields were found.

Agent Plugins specification §5.2

Manifest field types

All present metadata and extension fields use permitted JSON types.

Agent Plugins specification §§5.2–5.6

Root plugin.json file

A regular plugin.json file exists at the plugin root.

Agent Plugins specification §§4.1 and 5.1

Agent Skills discovery and format

1 immediate-child Agent Skill discovered; every SKILL.md passed required frontmatter and naming checks.

Agent Plugins specification §7.1 and Agent Skills specification

MCP configuration

No root mcp.json is present; MCP is optional and its absence is conforming.

Agent Plugins specification §§6.2 and 7.2

Capabilities

What can you do with Frontend Design Agent Plugin?

Give the agent a point of view.

Use this plugin when a technically correct interface still feels anonymous, generic, or disconnected from the product it represents.

Establish a distinctive visual direction before writing UI code.
Define clear display, body, and utility typography roles.
Build a product-specific color system instead of using defaults.
Avoid generic template patterns and interchangeable layouts.
Review hierarchy and responsive behavior on real screen sizes.
Check keyboard focus, contrast, and reduced-motion behavior.
Critique and simplify the interface before shipping.

Choose a real direction

Define a palette, type system, layout logic, and a signature element that belong to the product—not to a generic template.

Make typography carry character

Treat display, body, and utility type as deliberate roles with an intentional scale, weight, width, and rhythm.

Use structure as information

Build hierarchy and sequence from the content itself, so labels, dividers, grids, and spacing explain rather than decorate.

Critique before shipping

Review generic choices, responsive behavior, keyboard focus, reduced motion, and visual excess before calling the interface done.

Practical workflow

From brief to deliberate interface

Pass 01 / Direction

Make the choices explicit

Name the subject, audience, and page job. Then commit to color, type, layout, and one signature move before writing UI code.

Pass 02 / Critique

Build, inspect, remove

Implement the plan, inspect real screenshots, fix accessibility and responsive issues, then remove one unnecessary flourish.

Package contents

What is included in this plugin?

The package is deliberately small: one reusable Agent Skill, its portable manifest, and the license required to redistribute it. It does not install an MCP server or background service.

Agent Skills

frontend-design

MCP servers

No runtime service

Package format

Agent Plugins

Official latest 1.0.0

plugin.json

Portable package identity, version, license, and keywords.

SKILL.md

The complete workflow and design instructions for the agent.

LICENSE.txt

Apache 2.0 terms shipped with this plugin package.

Installation

Copy the complete plugin directory

Agent Plugins 1.0 defines the package, but each compatible client controls how local plugins are loaded. These commands download only this plugin from the collection; then select the resulting folder in your client's local-plugin flow.

Terminal · Git sparse checkout

git clone --filter=blob:none --sparse https://github.com/chenmiaohero/Portable-Agent-Plugins.git
cd Portable-Agent-Plugins
git sparse-checkout set plugins/frontend-design

Confirm plugin.json is at the plugin root.

Review SKILL.md before enabling the plugin.

Check that your client supports required tools.

Synced source content

Repository README

View original README

This README snapshot is stored by Agent Plugins Hub and refreshed by the daily GitHub synchronization pipeline. Remote images and embedded content are not loaded.

Source: https://github.com/chenmiaohero/Portable-Agent-Plugins#readme

This repository does not currently provide a README snapshot. The plugin instructions below remain available.

Source documentation

Frontend Design instructions

Request update View raw SKILL.md

Rendered from the linked GitHub source. Raw HTML is disabled, scripts cannot execute, and external links open in a separate tab.

Frontend Design

Approach interface work as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. Make deliberate, opinionated choices about palette, typography, layout, and one justifiable aesthetic risk.

Core workflow

Ground the design in a concrete subject, audience, and single job.
Create a compact design plan covering color, type, layout, and one memorable signature.
Review the plan for generic defaults, revise it, then build.
Critique the finished interface again at desktop and mobile sizes.

Essential principles

Let the product's own materials, instruments, and vocabulary drive the visual language.
Treat typography as a defining part of the interface, not neutral delivery.
Use structure to communicate real sequence, hierarchy, and meaning.
Spend boldness in one memorable place and keep the surrounding system disciplined.
Verify responsive behavior, keyboard focus, reduced motion, and production readiness.

Output

The workflow produces a concrete visual direction and a polished, working frontend whose content and interaction choices fit the brief.

The complete source documentation is available from the original GitHub file linked above.

Same collection

Related design plugins

Explore plugin repositories

Developer Tools