Canonical manifest schema
plugin.json targets the official 1.0.0 schema.
Agent Plugins specification 搂5.2
Frontend Design Agent Plugin
Guide coding agents to create distinctive, intentional interfaces through a concrete aesthetic direction, careful typography, useful structure, and disciplined critique.
0 repository stars Apache-2.0 Updated Aug 8, 2026
Direction / 01
specific
by design.
One subject. One job. One visual idea worth remembering.
Install with Codex CLI or Copilot CLI
Choose your CLI, register the author's Marketplace, and install Frontend Design by its marketplace package name. Marketplace registration only needs to succeed once.
Installation
Install Plugin
Choose Codex or Copilot, click Copy, paste the two lines into a terminal, and press Enter.The installation commands are identical on Windows, macOS, and Linux.
codex plugin marketplace add agentplugin-net/portable-agent-plugins
codex plugin add frontend-design@agentplugin-netExplainable standards check
Conforms to Agent Plugins 1.0.0
Official latest version: 1.0.0 (Published). The value is read from the official specification and cached for one day.
This is a static package-format check, not a security audit, quality score, malware scan, or guarantee of client compatibility.
Required name and naming rules
The plugin name 鈥?{name}鈥?satisfies the 1鈥?4 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鈥?.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
1
frontend-design
MCP servers
0
No runtime service
Package format
Agent Plugins
Official latest 1.0.0
Synced source content
Repository 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.
This repository does not currently provide a README snapshot. The plugin instructions below remain available.
Source documentation
Frontend Design instructions
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
Design
ado-to-github-teams
Agent-native installation and operations guidance for the ado-to-github-teams CLI.
Design
agent-looper
Portable Agent Plugins skills for designing and running Agent Looper fix-until-green cycles.
Design
atta-desktop
A canvas your agent can read and write to — create charts, interactive data apps, SVG diagrams, and run local Python on the Atta Desktop canvas.