pi-frontend-create

A Pi skill that creates distinctive, production-grade frontend interfaces that avoid common AI design patterns. Generates authentic, contextually-aware designs with real craft.

Packages

Package details

skill

Install pi-frontend-create from npm and Pi will load the resources declared by the package manifest.

npm repo report
$ pi install npm:pi-frontend-create
Package
pi-frontend-create
Version
1.0.3
Published
May 15, 2026
Downloads
not available
Author
parkerhurst
License
Apache-2.0
Types
skill
Size
97.4 KB
Dependencies
0 dependencies · 0 peers
Pi manifest JSON
{
  "skills": [
    "./skills"
  ],
  "image": "https://codeberg.org/parkerHurst/pi-frontend-create/raw/branch/main/skills/frontend-create/banner.png"
}

Security note

Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.

README

pi-frontend-create

A Pi skill that creates distinctive, production-grade frontend interfaces — designed to avoid the repetitive patterns common in AI-generated web design.

Why this skill exists

When AI agents design frontends, they tend to converge on the same patterns: Playfair Display + DM Sans, dark themes with grain overlays, centered hero sections, teal/cyan accent colors, fade-up scroll reveals. This skill explicitly identifies and avoids those patterns, producing designs that feel genuinely crafted.

What it does

  • Provides a detailed banned pattern list of 25+ specific AI design clichés
  • Offers constructive alternatives for typography, color, layout, interaction, and structure
  • Includes a 13-point anti-pattern checklist to verify output before delivery
  • Guides a design process grounded in contextual anchoring, not random generation

Installation

pi install npm:pi-frontend-create

Or install from the Codeberg repository:

pi install git:codeberg.org/parkerHurst/pi-frontend-create

Or install from a local path:

pi install /path/to/frontend-create

Usage

The skill activates automatically when you ask Pi to build web UI components, pages, or applications. You can also invoke it directly:

/skill:frontend-create

Key principles

  1. Choose lesser-known typefaces — no Playfair Display, Syne, Unbounded, Fraunces, or Space Grotesk as primary fonts
  2. Use abstract CSS variable names — --ink, --paper, --signal, not --espresso, --moss, --caramel
  3. Break the hero-centered layout formula — try split grids, left-aligned heroes, or asymmetric compositions
  4. Use animations sparingly — one well-timed animation beats five simultaneous fade-ups
  5. Let backgrounds be colored — cream, pale yellow, warm grey, dusty rose — not just black or white
  6. Design for the specific brief — a coffee shop should feel different from a music streaming service

File structure

skills/
  frontend-create/
    SKILL.md        # Skill instructions
    LICENSE.txt     # Apache 2.0 license
    banner.html     # Source for the catalog banner image
    banner.png      # 16:9 banner for the Pi Packages Catalog

Links

License

Apache-2.0