More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Perfect UI

    1

    Design and build cohesive, anti-slop web pages with custom icons, vibe-locked visuals, and orchestrated motion.

    Free

    1 installSecurity scanned
    Perfect UI

    Perfect UI

    Example session with this skill installed

    Design a high-end editorial landing page for a boutique architecture firm called 'Arcane Form'. Use a minimal vibe with a 2/3 motion budget.

    • Read your context and instructions
    • Compiled the perfect ui

    I have completed the discovery and visual direction phases for Arcane Form. We are moving forward with an

    Editorial vibe, focusing on asymmetric layouts and high-contrast typography.

    Design Direction: Arcane Form

    The visual identity focuses on architectural precision, using a monochrome-heavy palette with a single 'concrete' accent. All icons will be custom-drawn with a consistent 1pt stroke.

    ElementSelection
    VibeEditorial Minimal
    PaletteInk (#1A1A1A), Paper (#F5F5F5), Concrete (#8C8C8C)
    TypographyEditorial New (Display) + Neue Montreal (Body)
    Motion2/3 (Framer Motion entrances + Lenis smooth scroll)
    Asset StyleSchematic line-art illustrations
    // app/components/icons/ArcaneLogo.tsx
export const ArcaneLogo = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 22L12 2L22 22H2Z" stroke="currentColor" strokeWidth="1"/>
    <path d="M7 12H17" stroke="currentColor" strokeWidth="1"/>
  </svg>
);

    Next steps

    1. Review the generated icon set in app/components/icons/.
    2. Approve the plans/arcane-form/plan.md implementation roadmap.
    3. Initiate Phase 7 to begin Next.js component assembly.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Ship web pages that look handcrafted, not generated. Most AI-designed sites suffer from "AI slop": generic gradients, overused Inter typography, and clichéd marketing copy. This skill enforces a strict 8-phase design pipeline to ensure every visual element, from custom SVG icons to motion intensity, follows a single, cohesive visual identity.

    What it does

    • Vibe lock establishes a specific visual direction including palette, typography, and spatial language before any code is written.
    • Custom icon design generates unique SVG icons for every project, strictly banning emoji and standard icon libraries like Lucide or Heroicons.
    • Visual asset production creates 2D illustrations, static 3D renders, and background textures aligned with the site's aesthetic.
    • Motion orchestration scales entrance animations and scroll behaviors from minimal CSS to full GSAP choreography based on a defined "motion budget."
    • Anti-slop auditing runs a final verification gate to strip out common AI fingerprints like "unleash/elevate" copy or generic feature grids.

    How it works

    1. Discovery and Vibe Lock: The agent brainstorms the page purpose, audience, and one of eleven visual vibes (e.g., Brutalist, Editorial, or Glass-tech).
    2. Visual Direction: You approve a specific palette, typography pair, and motion intensity scale (0/3 to 3/3).
    3. Asset Generation: The agent builds a custom icon set and 2D visual assets tailored to the design brief.
    4. Design Plan Verification: A 10-field design plan block is verified to ensure all choices are consistent before code emission begins.
    5. Implementation: The page is built using Next.js, Tailwind, and shadcn, integrating custom shaders or smooth scrolling where requested.

    Frameworks & tools

    This skill is optimized for Next.js 14+ App Router, Tailwind CSS, and shadcn/ui. It utilizes Framer Motion, Lenis for smooth scrolling, and React Three Fiber for shader effects.

    Why this beats prompting it yourself

    Generic prompts result in the same purple-gradient SaaS template every time. This skill uses a multi-phase pipeline and a diversification log to ensure your site macrostructure and visual language are distinct from previous builds. It replaces standard icon libraries with custom SVGs, giving your site a bespoke feel that standard LLM outputs cannot match.

    Use cases

    • High-conversion landing pages with rich, vibe-specific section archetypes and honest copy.
    • Professional portfolios that lead with work showcase rather than personal clichés.
    • Product splash pages featuring unique 2D illustrations and atmospheric shader effects.
    • Generic page types like pricing, about, or dashboard surfaces that require brand consistency without marketing fluff.

    Known limitations

    Does not produce backend APIs, authentication flows, or payment integrations. Raw Figma files are not generated. AI-generated 3D models (GLB/GLTF) are forbidden as hero subjects.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    1 install

    Downloaded by developers to date

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 13 days ago

    • Free to download with an account

    Requires

    Node.js

    Listed13 days ago

    What's inside

    Frequently Asked Questions