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.

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-net

Explainable standards check

Latest official standard could not be confirmed

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.

Source package available for inspection

The package could not be checked: plugin.json returned 403.

Static source inspection

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.

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/agentplugin-net/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