Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsApp & Site Designer — Landing Pages, Stores & Dashboards
- **Directional Prototyping**: Generates three distinct design directions and provides a comparative justification for the winner.
Free
App & Site Designer — Landing Pages, Stores & Dashboards
Example session with this skill installed
Design a mobile fitness app interface for iOS. Use a 'Cyberpunk' theme but keep it functional. Give me three directions and pick the best one.
- Read your context and instructions
- Compiled the app & site
I have researched current cyberpunk design trends and Google Fonts pairings suited for high-readability fitness interfaces. I generated three directions and optimized the winner for iOS Liquid Glass standards.
Design Directions
Direction 1: Neon Minimalist
- Concept: High-contrast black background with single-pixel fluorescent borders.
- Palette: #000000 (Onyx), #00FF9F (Matrix Green), #FF0055 (Cyber Pink).
- Typography: Inter for stats, Orbitron for headers.
- Critique: Strong identity but high eye strain for long workouts.
Direction 2: Industrial Tech (Winner)
- Concept: Based on old synthesized music equipment. Tactile buttons and "Liquid Glass" overlays.
- Palette: #1A1A1B (Deep Carbon), #E0E0E0 (Cool Platinum), #FFD700 (Warning Yellow).
- Typography: SF Pro (Native), JetBrains Mono for data points.
- Justification: Balances the cyberpunk aesthetic with iOS native readability and Dynamic Type support.
Direction 3: Glitch Aesthetic
- Concept: Intentionally offset elements and chromatic aberration effects.
- Palette: #050505 (Void), #7101FF (Electric Purple), #00E5FF (Cyan).
- Typography: Roboto Condensed.
- Critique: Fails the "tell check" for functional simplicity; too many decorative elements.
iOS Implementation Specs (SwiftUI)
// Theme: Industrial Tech
// Platform: iOS 17+ (Liquid Glass)
struct WorkoutCard: View {
var body: some View {
VStack(alignment: .leading) {
Text("HEART RATE")
.font(.system(.caption, design: .monospaced))
.foregroundColor(Color(hex: "#FFD700"))
Text("165 BPM")
.font(.system(.title, weight: .bold))
.foregroundStyle(.ultraThinMaterial) // Liquid Glass effect
}
.padding()
.background(Color(hex: "#1A1A1B"))
.cornerRadius(12)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(Color(hex: "#E0E0E0"), lineWidth: 0.5)
)
}
}
Next steps
- Confirm the "Industrial Tech" direction for full view mapping.
- Review the subtraction pass results to see which secondary stats were removed.
- Export the finalized color palette to your Assets.xcassets file.
Connects securely to your tools. The creator never sees your data.
About this skill
Designers often struggle with generic AI layouts that feel like templates rather than products. This skill forces a professional design workflow by researching real-world trends, generating competing directions, and auditing outputs against 45 known AI design "tells." It moves beyond simple prompting to produce production-ready specs for web and mobile platforms.
What it does
- Trend Research: Pulls live Google Fonts catalogs and categorizes real-world color palettes based on subject matter.
- Directional Prototyping: Generates three distinct design directions and provides a comparative justification for the winner.
- Platform Adaptation: Applies native design systems including iOS Liquid Glass and Android Material 3 Expressive.
- Reductionist Optimization: Executes a subtraction pass to remove non-essential UI elements until only core functionality remains.
- Quality Audit: Runs a specific check to identify and remove common AI design defaults and artifacts.
How it works
- Research: The skill fetches live typography and trend data to ground the project in current standards.
- Concept: It develops three competing visual identities based on real-world objects rather than digital templates.
- Draft: You review the proposed directions and select the foundation for implementation.
- Refine: The skill applies platform-specific rules (SwiftUI, Compose, React Native) and runs the "tell check" script.
Frameworks & tools
This skill supports SwiftUI, Jetpack Compose, React Native, Expo, and Flutter. It integrates with Google Fonts and Agensi MCP for live data retrieval.
Why this beats prompting it yourself
Standard prompts usually result in a "grid of stat tiles" or generic layouts. This skill enforces a professional methodology that includes subtraction passes and native platform constraints, ensuring the output doesn't look like an AI-generated template.
Use cases
- Drafting a high-fidelity iOS app concept using Liquid Glass principles.
- Creating a unique web brand identity based on real-world material palettes.
- Converting a generic web layout into a native Android Material 3 interface.
- Auditing existing AI-generated designs to remove generic "AI tells."
Known limitations
Requires an active Agensi MCP server connection and API key for live data lookups. Native implementations are focused on structural layout and navigation rather than full functional logic.
Requires Agensi MCP server connection and AGENSI_API_KEY. Focuses on design systems and UI architecture rather than backend logic.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
1 use
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 19 days ago
- Free with an Agensi account