kyle hobson
Menu
Selected work

Making this portfolio / VISUAL INTEGRATION · REUSABLE SKILLS

Turn “make it better” into a visible decision.

The portfolio itself is an ongoing example of my AI workflow: source the work, direct the assets, inspect the page, and refine it from specific feedback.

2 min overview · optional detail below

Making this portfolio
Published camera-capture case showing Kyle’s picture-in-picture design proposal.
Portfolio design process · original work and explicit source labels
My role
Portfolio owner · story, design direction, and review
Timeframe
2026
Focus
Evidence-led content, asset integration, browser QA

Work shownPublished portfolio · iterative design process

See the camera case in contextExplore my longer AI-building journey

THE CHALLENGE

AI can produce a polished-looking page that still tells the wrong story. Early versions relied too much on text and decorative imagery, while the real design journey was hard to see.

MY CONTRIBUTION

I set the visual and editorial direction, supplied missing originals, and turned feedback into concrete changes that AI-assisted implementation could act on.

01 / Observe

Start with what the page is failing to show.

The earlier AI page led with a small, text-heavy diagram. My feedback on the wider portfolio was specific: show the original problem, show the flow, and make the contribution easier to scan.

02 / Reusable practice

Give every asset a job.

My visual asset integration workflow separates documentary evidence from illustration. Original screenshots prove the work. Generated artwork can add identity or atmosphere, but it cannot stand in for a design I actually made.

Workflow, explained

  1. 01

    Anchor

    Name the exact screen region and the change it needs.

  2. 02

    Source

    Choose an original artifact or a clearly labeled illustration.

  3. 03

    Integrate

    Set the crop, hierarchy, caption, and responsive behavior.

  4. 04

    Inspect

    Review the rendered page and test the interaction.

The decision

An anchor is a precise visual reference, such as the recording control or a case-study cover. It turns “this feels off” into a change we can inspect.

03 / Refine

Make the change visible.

In the Design edition, the review loop separates the original interface, the redesign within the agreed scope, and the picture-in-picture proposal for future work.

WHERE IT LANDED

Something concrete to inspect.

The published portfolio now uses original screenshot sequences, short decision chapters, optional deeper notes, and source-aware image previews. This Applied AI edition extends that approach to the workflow behind the work.

What I learned and would test next

The most useful correction often removes something: an unsupported claim, a decorative asset without a purpose, or text that repeats what the screenshot already shows.

Next, test whether a recruiter can identify the problem, my contribution, and the result from a short scan of each case.

Original project screenshots and source documentation. Process diagrams are retrospective explanations.

KEEP EXPLORING

CLARE & AI Glossary

From collecting AI knowledge to putting it to work.

Read next
Compasses & MCPs

Give AI work a repeatable review path.

Read next
Prompt Compass

Keep the job intact when the prompt changes.

Read next

A GOOD PLACE TO START

Let’s find the useful part of AI for your team.

For applied AI consulting, AI analysis, prompt design, enablement, and human–AI product work.

Mesa, Arizona · Open to remote collaboration LinkedIn GitHub
Open original