Content
# Tool List
CEDEC 2026 Short Session "Quickly Creating Good-looking Screens with Claude Code × Figma × unity-cli-loop × UITK" repository.
**Claude Code × Figma Make × Figma Dev Mode MCP × unity-cli-loop (uLoopMCP) × UI Toolkit** workflow for creating a single-screen mini-game "Onigiri Clicker".
## LT Slides
You can view the presentation slides directly in your browser → **https://41h0-siro.github.io/cedec2026-lt-ai-ui-workflow/**
## Before / After
| Before (Temporary UI: `Before.unity`) | After (After applying AI workflow: `After.unity`) |
|---|---|
|  |  |
The functionality (clicking, automatic production, shop purchase) is the same for both. Only the appearance was created using the AI workflow.
## Contents
- `CEDEC_Unity/` — Unity project where the LT demo was created (Unity 6000.4.5f1 / URP)
- `Assets/_Project/UI/` — UXML/USS. `ClickerScreenAI.*` is the **completed version created by the AI workflow**, and `ClickerScreen.*` is the temporary UI before applying the workflow.
- `Assets/_Project/Scripts/Clicker/` — Game logic and UI connections
- `Assets/_Project/Scenes/` — `After.unity` (completed version) / `Before.unity` (temporary UI)
- `.claude/skills/` — Unity operation skills (uloop-* ) + UI Toolkit knowledge skills (used on the Unity side)
- `.claude/skills/` — Core skills for the workflow
- `figma-make-prompt` — Requirements discussion → Figma Make input prompt generation
- `uitk-import` — Figma MCP output → UXML/USS conversion → Unity placement → screenshot verification
**For those not using Claude Code**: Each skill's `SKILL.md` is a human-readable procedure manual and know-how collection. If you want to know more about the workflow, read `.claude/skills/figma-make-prompt/SKILL.md` and `.claude/skills/uitk-import/SKILL.md` first.
## Workflow Overview
1. **Discuss requirements with Claude Code** → Generate Figma Make prompts (`figma-make-prompt`)
2. **Generate and modify screen design with Figma Make**
3. **Import design into Claude Code with Figma Dev Mode MCP**
4. **Translate to UXML/USS** and place in Unity (`uitk-import`)
5. **Compile with uLoopMCP, obtain screenshots, and self-modify in a loop** (final human review)
Examples of talking to Claude Code: "I want to create a prompt for Figma" → `figma-make-prompt` starts / "I want to import this Figma design into Unity" → `uitk-import` starts.
## Setup
1. **Open `CEDEC_Unity/` with Unity 6000.4.5f1** (uLoopMCP is automatically obtained via manifest)
2. Play the scene `Assets/_Project/Scenes/After.unity` → Onigiri Clicker will move ( `Before.unity` is the temporary UI version)
3. To try the AI workflow: **Start Claude Code** at the repository root (Node.js required)
4. Connect uLoopMCP: Start the server from the Unity menu `Window > uLoopMCP` (provided by the uLoopMCP package), and operate with `npx --yes uloop-cli@2.2.0 <cmd> --project-path CEDEC_Unity` (see each `uloop-*` skill for details)
5. **Enable Figma Dev Mode MCP** if using it
> **Note**: `CEDEC_Unity/.uloop/settings.permissions.json` is set to safe (Restricted / third-party tools disabled). Change only if you understand the risks and need advanced operations with dynamic code execution.
## Verified Environment
Verified on macOS / Unity 6000.4.5f1 / uLoopMCP (uloop-cli 2.2.0).
## License
This repository is under the [MIT License](LICENSE).
For licenses of included third-party materials (uloop skills, unity-ui-toolkit skills, M PLUS Rounded 1c font), see [THIRD-PARTY-NOTICES.md](THIRD-PARTY-NOTICES.md).
