skills.rest
jordi-murgo
jordi-murgoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Coordinate UI modifications from screenshots through ASCII layout proposals to code generation.

Updated Jun 29, 2026
Search Tags:#code generation#ui design#collaborative workflow#ui modification#ascii mockups
One-click install
npx skills add https://github.com/jordi-murgo/agent-skills --skill ui-design-jordi-murgo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/jordi-murgo/agent-skills/tree/main/ui-design
Command: npx skills add https://github.com/jordi-murgo/agent-skills --skill ui-design-jordi-murgo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pymupdf, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of unclear communication and inefficient collaboration when making UI style changes. It helps align on the desired outcome before jumping into code, reducing miscommunication and wasted tokens.

Core Features & Use Cases

  • Structured Workflow: Follows a "screenshot → describe current state → propose options → code → fine-tune" flow to reduce miscommunication and avoid wasted tokens.
  • User Interface Collaboration: Ideal for scenarios where multiple people need to provide feedback on UI changes, such as adjusting layouts, spacing, colors, or component composition.
  • Use Case: When a user wants to modify the UI of a web application, this Skill can guide the process from the initial screenshot to the final fine-tuning step.

Quick Start

To change the UI style of a component, upload a screenshot and describe the current state. Then, request proposed options and fine-tune based on the feedback provided.

Frequently Asked Questions about ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I streamline UI style modifications without wasting tokens on miscommunication?▼

Streamline UI style modifications by following a structured workflow that starts with a screenshot, proposes layout changes with ASCII mockups, and generates code only after visual alignment, reducing wasted tokens.

What is the best way to collaboratively propose layout changes for a web application?▼

The best way to propose layout changes collaboratively is using ASCII diagrams to visually present options before coding, ensuring all stakeholders align on the desired UI outcome without miscommunication.

How do I start a UI modification workflow from an existing screenshot?▼

To start a UI modification workflow, upload a screenshot of the current interface, describe its existing state, request proposed layout options, and then fine-tune the generated code based on feedback.

Do I need Python libraries to generate and adjust UI code from ASCII mockups?▼

Yes, you need Python libraries such as pymupdf installed to support the code generation and adjustment phases that follow the ASCII mockup proposal step in the UI modification workflow.

Why use ASCII mockups before jumping into UI code generation?▼

Using ASCII mockups before UI code generation helps align on the desired layout outcome visually, preventing miscommunication and avoiding wasted effort on premature code adjustments.

Can I fine-tune generated UI code based on stakeholder feedback within this workflow?▼

Yes, you can fine-tune generated UI code based on stakeholder feedback, as the structured workflow explicitly includes an adjustment phase after the initial code generation step.

Related Skills

Explore More Design & Creative Skills→
vercel-labsvercel-labs
210

before-and-after

Capture before-and-after screenshots from two URLs or image paths.

Official
Advanced
SinShine5SinShine5
40

testing-agent

Generate, write, and run goal-based evaluation tests for agents using MCP tools.

Community
Advanced
Cissou34730Cissou34730

pptx

Automate PowerPoint deck creation, editing, and analysis with Python.

Community
Advanced
IsKenKenYaIsKenKenYa
35

ui-visual-validator

Analyze screenshots to validate UI modifications against design mockups and WCAG guidelines.

Community
Advanced