Humane Functionalism

Improve UI and UX through Danish functionalism. Use for a Danish functionalist design pass on a screen or flow, grounding hierarchy, interaction, human fit, and craft in actual use.

These results were generated by SkillArena using this skill. They do not represent official output from the skill’s author.

Author
kemiljk
Repository
github.com/kemiljk/skills
Tested source
skills/humane-functionalism · SKILL.md
Commit
87129c9
License
MIT
Referenced files inlined
✓
Model
claude-opus-5-5
Generated
2026-11-07

Install

skills.sh CLI

npx skills add kemiljk/skills --skill humane-functionalism

Exact tested version (manual)

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/kemiljk/skills "$tmp"
git -C "$tmp" checkout 87129c9747468e380adc28a98226fdffcd55ce9b -- skills/humane-functionalism
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/humane-functionalism" ~/.claude/skills/humane-functionalism
rm -rf "$tmp"

Copies the skill folder at commit 87129c9 — the exact files used for the results on this page — into ~/.claude/skills/humane-functionalism. For a single project, use .claude/skills/ inside it instead.

The methods from the author install the latest version, which may differ from the commit tested here. Skills run with your coding agent’s permissions; review a skill before installing it.

Compare with baseline

SaaS landing page

Compare with baseline
Brief · sent to the model word for wordTempo is a shared calendar tool for small teams of 5 to 50 people. Its main selling point is "automatically finds a time when everyone is free." Build a marketing landing page: a hero with a headline and a primary button, three core features, a testimonials section (using names that are obviously placeholders), a three-tier pricing table (Free / $9 / $19 per person per month), and a footer.
Humane Functionalism — SaaS landing page, run 1, desktop
Humane Functionalism — SaaS landing page, run 1, mobile
Run 1 Full-page screenshot
Humane Functionalism — SaaS landing page, run 2, desktop
Humane Functionalism — SaaS landing page, run 2, mobile
Run 2 Full-page screenshot
Humane Functionalism — SaaS landing page, run 3, desktop
Humane Functionalism — SaaS landing page, run 3, mobile
Run 3 Full-page screenshot

Analytics dashboard

Compare with baseline
Brief · sent to the model word for wordAn operations dashboard for the owner of a coffee chain with 4 locations. Show three metric cards: today's revenue, number of orders, and average order value; a line chart of revenue over the last 30 days; a bar chart comparing sales across locations; a table of the top 5 best-selling items; and a date range picker. Use hard-coded sample data.
Humane Functionalism — Analytics dashboard, run 1, desktop
Humane Functionalism — Analytics dashboard, run 1, mobile
Run 1 Full-page screenshot
Humane Functionalism — Analytics dashboard, run 2, desktop
Humane Functionalism — Analytics dashboard, run 2, mobile
Run 2 Full-page screenshot
Humane Functionalism — Analytics dashboard, run 3, desktop
Humane Functionalism — Analytics dashboard, run 3, mobile
Run 3 Full-page screenshot

Mobile app screen

Compare with baseline
Brief · sent to the model word for wordThe "My Plants" home screen of a plant care app, designed for a phone screen. At the top, a greeting and how many plants need watering today; a list of plant cards, each with the plant's name, species, next watering time, and a "Watered" button; a bottom navigation bar with 4 tabs; and an "Add plant" floating action button in the bottom-right corner.
Humane Functionalism — Mobile app screen, run 1, desktop
Humane Functionalism — Mobile app screen, run 1, mobile
Run 1 Full-page screenshot
Humane Functionalism — Mobile app screen, run 2, desktop
Humane Functionalism — Mobile app screen, run 2, mobile
Run 2 Full-page screenshot
Humane Functionalism — Mobile app screen, run 3, desktop
Humane Functionalism — Mobile app screen, run 3, mobile
Run 3 Full-page screenshot

Sign-up form

Compare with baseline
Brief · sent to the model word for wordA registration page for an online coding summer camp. On the left, an introduction to the camp and three highlights; on the right, a registration form: parent's name, email, child's grade (dropdown), areas of interest (multiple choice: games, robotics, web), session dates (single choice from three sessions), and a submit button. Include form validation messages and a success state after submitting.
Humane Functionalism — Sign-up form, run 1, desktop
Humane Functionalism — Sign-up form, run 1, mobile
Run 1 Full-page screenshot
Humane Functionalism — Sign-up form, run 2, desktop
Humane Functionalism — Sign-up form, run 2, mobile
Run 2 Full-page screenshot
Humane Functionalism — Sign-up form, run 3, desktop
Humane Functionalism — Sign-up form, run 3, mobile
Run 3 Full-page screenshot

SkillArena itself

Compare with baseline
Brief · sent to the model word for wordSkillArena is a website that compares UI skills for AI coding agents. Build its home page: a header with the logo and navigation (Matrix, Compare, About, Waitlist); a hero that explains that every page on the site was generated from the same product brief with a different skill; a matrix where rows are skills (the first row is a "no skill" control group) and columns are four briefs, each cell showing a screenshot thumbnail (use placeholder boxes); and a waitlist form with email and a role choice. Use placeholder skill names.
Humane Functionalism — SkillArena itself, run 1, desktop
Humane Functionalism — SkillArena itself, run 1, mobile
Run 1 Full-page screenshot
Humane Functionalism — SkillArena itself, run 2, desktop
Humane Functionalism — SkillArena itself, run 2, mobile
Run 2 Full-page screenshot
Humane Functionalism — SkillArena itself, run 3, desktop
Humane Functionalism — SkillArena itself, run 3, mobile
Run 3 Full-page screenshot