Inspiration
Getting a tattoo is one of the few permanent decisions people make about their appearance. Yet the planning process is still mostly guesswork — you describe an idea to an artist, look at reference images that don't match your skin tone or body shape, and hope for the best. I wanted to build something that makes the whole process more visual, more informed, and a lot less stressful. When I found out Perfect Corp had a powerful API for AI image generation and skin analysis, it felt like the right tools for exactly this problem.
What it does
SecondSkin is a 4-step web app:
- You describe your tattoo idea in plain text and pick a style — the app generates the design using Perfect Corp's AI image generation.
- You upload a photo of the body area, draw a mask over where you want the tattoo, and get a realistic preview of how it would look on your skin.
- You run a skin health check on the area — analyzing texture, pores, moisture, oiliness, redness, and acne — so you know if your skin is actually ready for ink.
- You export a full consultation sheet with the design, placement preview, and skin scores — something concrete to bring to your tattoo artist.
How we built it
The frontend is built with Next.js 14 and TypeScript, using Tailwind CSS for styling. All three core AI features — tattoo design generation, placement, and skin analysis — are powered by Perfect Corp's YouCam API v2.
The design generation uses Perfect Corp's text-to-image endpoint with style templates (pencil sketch, ink painting, watercolor, ukiyo-e, and others). The placement preview uses the obj-replace endpoint for AI mode, and a custom HTML5 Canvas compositing pipeline for Precise mode — where we extract ink from the design image by converting pixel lightness to alpha, sample the skin tone under the mask, and blend using multiply and soft-light modes to make it look like actual ink on skin. The skin analysis uses Perfect Corp's skin-analysis endpoint with six concern dimensions returned as JSON scores.
Challenges we ran into
The biggest technical challenge was making the tattoo placement preview look natural. Simply pasting the design image onto the body photo looks like a sticker — wrong. We had to build a proper compositing pipeline: ink extraction by inverting lightness to alpha, skin tone sampling, feathered mask edges, and layered blend modes. Getting those parameters right took several iterations.
On the API side, the YouCam V2 async task pattern — upload to presigned URL, submit task, poll for result — required careful handling to avoid race conditions and give users feedback while waiting.
We also hit a parameter mismatch where the body image and mask had to be the exact same dimensions for the obj-replace endpoint to accept them. That took a while to track down.
Accomplishments that we're proud of
Getting the end-to-end pipeline working — from a text description all the way to a downloadable consultation sheet — within the hackathon timeframe. The skin tone-aware ink compositing is something we're genuinely happy with; when it works well, it really does look like the tattoo belongs on the skin.
What we learned
A lot about Perfect Corp's API surface — it's more capable than we expected going in. The skin analysis in particular is impressive for a single API call. We also learned a lot about HTML5 Canvas pixel manipulation, which is one of those browser APIs that looks simple but hides a lot of depth.
What's next for SecondSkin
- Real-time AR try-on using the camera, instead of a static photo upload
- A way to share the placement preview with a tattoo artist directly from the app
- Healing timeline guidance based on the skin analysis results
- Support for multiple tattoo placements in a single session
Built With
- html5
- next.js
- perfectcorp
- react18
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.